Bagaimana Anda menetapkan nilai yang dipilih dalam html?

Question

Saya memiliki fungsi jquery berikut

Nội dung chính Show

Menghapus pilihan
Mendapatkan larik nilai dari semua elemen opsi
Mengubah nilai elemen value_0
Bagaimana Anda menetapkan nilai dropdown seperti yang dipilih?
Bagaimana Anda menentukan opsi yang dipilih dalam HTML?
Bagaimana cara memilih nilai dropdown sebelumnya dalam HTML?
Bagaimana cara menetapkan nilai tag pilih dalam JavaScript?

$.post('GetSalesRepfromCustomer', {
    data: selectedObj.value
}, function (result) {
    alert(result[0]);
    $('select[name^="salesrep"]').val(result[0]);
});

result[0] adalah nilai yang ingin saya setel sebagai item yang dipilih di kotak pilihan saya. result[0] sama dengan Bruce jones

kotak pilih diisi oleh kueri basis data tetapi salah satu html yang diberikan adalah

_

$('pilih[nama^="salesrep"]'). val(hasil[0]); . Saya juga sudah mencoba $("#salesrep"). val(hasil[0]);

Kita dapat menggunakan opsi selected="selected"_ untuk memilih nilai default dalam kode HTML. Kami menulis atribut selected di tag . Kita dapat menyetel nilai atribut selected ke selected untuk memilih opsi tertentu secara default saat halaman web pertama kali dimuat. Ini disebut atribut boolean dalam HTML. Opsi yang dipilih sebelumnya akan ditampilkan terlebih dahulu dalam daftar drop-down. Atribut ini hanya dapat digunakan pada elemen . Ini mendukung browser web seperti Google Chrome, Internet Explorer, Firefox, Opera, dll

Misalnya, di dalam badan HTML, buat tag tag followed by five options inside it. Write the numbers from 1-5 for the value attribute for each option. Write the text from One to Five between the

Contoh di bawah ini menggunakan metode select=selected untuk memilih nilai default dalam daftar drop-down. Kami membuat daftar tarik-turun yang memungkinkan kami memilih nilai dari element.Use the selected="selected" to Select Default Value for an HTML0 hingga element.Use the selected="selected" to Select Default Value for an HTML1. Saat halaman dimuat ulang, opsi element.Use the selected="selected" to Select Default Value for an HTML2 dimuat secara default karena kami telah menggunakan atribut selected untuk menentukan elemen sebagai default

Properti value_ dapat digunakan untuk mengatur atau memperbarui nilai elemen pilih. Untuk menghapus pilihan, setel nilai ke string kosong

Berikut adalah HTML untuk contoh dalam artikel ini



  
    
    bobbyhadz.com
  

  
    
      
      
      
      
    

    Click

Dan inilah kode JavaScript terkait

Bagaimana Anda menetapkan nilai yang dipilih dalam html?

Kami menggunakan properti value untuk menetapkan nilai elemen pilih

Konvensi ketika Anda tidak memiliki nilai default adalah membuat nilai elemen option pertama menjadi string kosong

Menghapus pilihan

Untuk menghapus pilihan, atur properti value_ dari elemen pilih ke string kosong

Mendapatkan larik nilai dari semua elemen opsi

Jika Anda memerlukan larik nilai dari semua elemen option, gunakan metode map() untuk mengulangi elemen dan mengembalikan nilai setiap option

Mengubah nilai elemen value_0

Nilai elemen value0 dapat diubah dengan cara yang sama seperti yang ditetapkan, cukup perbarui properti value

Jika Anda menyetel nilai elemen pilih ke nilai yang tidak ada di antara elemenoption, nilai elemen value0 akan disetel ulang

Anda dapat membuat objek yang menyimpan nilai dari elemen option untuk menghindari salah mengeja nilai

Ini adalah solusi yang jauh lebih baik daripada string pengkodean keras di semua tempat karena ini memanfaatkan pelengkapan otomatis IDE Anda

Ini juga membantu pembaca kode Anda mengetahui nilai alternatif dari elemen value0

Contoh di atas menunjukkan penggunaan umum

Setiap elemen

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

_0 harus memiliki atribut yang berisi nilai data untuk dikirim ke server saat opsi tersebut dipilih. Jika tidak ada atribut

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

3 yang disertakan, nilai defaultnya adalah teks yang terdapat di dalam elemen. Anda dapat menyertakan atribut pada elemen

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

_0 untuk membuatnya dipilih secara default saat halaman pertama kali dimuat

Elemen dengan (pemilik formulirnya). Nilai atribut ini harus berupa

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

2 dalam dokumen yang sama. (Jika atribut ini tidak disetel, elemen ke

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

2 di mana pun dalam dokumen, tidak hanya di dalam

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

2. Itu juga dapat menimpa elemen

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

2 leluhur

Atribut Boolean ini menunjukkan bahwa beberapa opsi dapat dipilih dalam daftar. Jika tidak ditentukan, maka hanya satu opsi yang dapat dipilih dalam satu waktu. Ketika

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

_8 ditentukan, sebagian besar browser akan menampilkan kotak daftar gulir alih-alih satu baris dropdown

Atribut ini digunakan untuk menentukan nama kontrol

Atribut Boolean yang menunjukkan bahwa opsi dengan nilai string yang tidak kosong harus dipilih

Jika kontrol ditampilkan sebagai kotak daftar gulir (mis. g. ketika

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

_8 ditentukan), atribut ini mewakili jumlah baris dalam daftar yang harus terlihat pada satu waktu. Browser tidak diharuskan menampilkan elemen pilih sebagai kotak daftar yang digulir. Nilai defaultnya adalah

const selects = custom.querySelectorAll('select');
for (const select of selects) {
  const div = document.createElement('div');
  const header = document.createElement('div');
  const datalist = document.createElement('datalist');
  const optgroups = select.querySelectorAll('optgroup');
  const span = document.createElement('span');
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute('multiple');
  function onclick(e) {
    const disabled = this.hasAttribute('data-disabled');
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if (disabled) return;
    if (multiple) {
      if (e.shiftKey) {
        const checked = this.hasAttribute("data-checked");
        if (checked) {
          this.removeAttribute("data-checked");
        } else {
          this.setAttribute("data-checked", "");
        }
      } else {
        const options = div.querySelectorAll('.option');
        for (let i = 0; i < options.length; i++) {
          const option = options[i];
          option.removeAttribute("data-checked");
        }
        this.setAttribute("data-checked", "");
      }
    }
  }

  function onkeyup(e) {
    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode === 13) {
      this.click();
    }
  }

  div.classList.add('select');
  header.classList.add('header');
  div.tabIndex = 1;
  select.tabIndex = -1;
  span.innerText = select.label;
  header.appendChild(span);

  for (const attribute of select.attributes) {
    div.dataset[attribute.name] = attribute.value;
  }
  for (let i = 0; i < options.length; i++) {
    const option = document.createElement('div');
    const label = document.createElement('div');
    const o = options[i];
    for (const attribute of o.attributes) {
      option.dataset[attribute.name] = attribute.value;
    }
    option.classList.add('option');
    label.classList.add('label');
    label.innerText = o.label;
    option.dataset.value = o.value;
    option.dataset.label = o.label;
    option.onclick = onclick;
    option.onkeyup = onkeyup;
    option.tabIndex = i + 1;
    option.appendChild(label);
    datalist.appendChild(option);
  }
  div.appendChild(header);
  for (const o of optgroups) {
    const optgroup = document.createElement('div');
    const label = document.createElement('div');
    const options = o.querySelectorAll('option');

    Object.assign(optgroup, o);
    optgroup.classList.add('optgroup');
    label.classList.add('label');
    label.innerText = o.label;
    optgroup.appendChild(label);
    div.appendChild(optgroup);
    for (const o of options) {
      const option = document.createElement('div');
      const label = document.createElement('div');

      for (const attribute of o.attributes) {
        option.dataset[attribute.name] = attribute.value;
      }
      option.classList.add('option');
      label.classList.add('label');
      label.innerText = o.label;
      option.tabIndex = i + 1;
      option.dataset.value = o.value;
      option.dataset.label = o.label;
      option.onclick = onclick;
      option.onkeyup = onkeyup;
      option.tabIndex = i + 1;
      option.appendChild(label);
      optgroup.appendChild(option);
    }
  }

  div.onclick = (e) => {
    e.preventDefault();
  };

  parent.insertBefore(div, select);
  header.appendChild(select);
  div.appendChild(datalist);
  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;

  div.onclick = (e) => {
    if (!multiple) {
      const open = this.hasAttribute("data-open");
      e.stopPropagation();
      if (open) {
        div.removeAttribute("data-open");
      } else {
        div.setAttribute("data-open", "");
      }
    }
  };

  div.onkeyup = (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      div.click();
    }
  };

  document.addEventListener('click', (e) => {
    if (div.hasAttribute("data-open")) {
      div.removeAttribute("data-open");
    }
  });

  const width = Math.max(...Array.from(options).map((e) => {
    span.innerText = e.label;
    return div.offsetWidth;
  }));

  console.log(width);
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = (e) => {
  const data = new FormData(this);
  e.preventDefault();
  submit.innerText = JSON.stringify([...data.entries()]);
};

_8

Catatan. Menurut spesifikasi HTML, nilai default untuk ukuran adalah

const selects = custom.querySelectorAll('select');
for (const select of selects) {
  const div = document.createElement('div');
  const header = document.createElement('div');
  const datalist = document.createElement('datalist');
  const optgroups = select.querySelectorAll('optgroup');
  const span = document.createElement('span');
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute('multiple');
  function onclick(e) {
    const disabled = this.hasAttribute('data-disabled');
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if (disabled) return;
    if (multiple) {
      if (e.shiftKey) {
        const checked = this.hasAttribute("data-checked");
        if (checked) {
          this.removeAttribute("data-checked");
        } else {
          this.setAttribute("data-checked", "");
        }
      } else {
        const options = div.querySelectorAll('.option');
        for (let i = 0; i < options.length; i++) {
          const option = options[i];
          option.removeAttribute("data-checked");
        }
        this.setAttribute("data-checked", "");
      }
    }
  }

  function onkeyup(e) {
    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode === 13) {
      this.click();
    }
  }

  div.classList.add('select');
  header.classList.add('header');
  div.tabIndex = 1;
  select.tabIndex = -1;
  span.innerText = select.label;
  header.appendChild(span);

  for (const attribute of select.attributes) {
    div.dataset[attribute.name] = attribute.value;
  }
  for (let i = 0; i < options.length; i++) {
    const option = document.createElement('div');
    const label = document.createElement('div');
    const o = options[i];
    for (const attribute of o.attributes) {
      option.dataset[attribute.name] = attribute.value;
    }
    option.classList.add('option');
    label.classList.add('label');
    label.innerText = o.label;
    option.dataset.value = o.value;
    option.dataset.label = o.label;
    option.onclick = onclick;
    option.onkeyup = onkeyup;
    option.tabIndex = i + 1;
    option.appendChild(label);
    datalist.appendChild(option);
  }
  div.appendChild(header);
  for (const o of optgroups) {
    const optgroup = document.createElement('div');
    const label = document.createElement('div');
    const options = o.querySelectorAll('option');

    Object.assign(optgroup, o);
    optgroup.classList.add('optgroup');
    label.classList.add('label');
    label.innerText = o.label;
    optgroup.appendChild(label);
    div.appendChild(optgroup);
    for (const o of options) {
      const option = document.createElement('div');
      const label = document.createElement('div');

      for (const attribute of o.attributes) {
        option.dataset[attribute.name] = attribute.value;
      }
      option.classList.add('option');
      label.classList.add('label');
      label.innerText = o.label;
      option.tabIndex = i + 1;
      option.dataset.value = o.value;
      option.dataset.label = o.label;
      option.onclick = onclick;
      option.onkeyup = onkeyup;
      option.tabIndex = i + 1;
      option.appendChild(label);
      optgroup.appendChild(option);
    }
  }

  div.onclick = (e) => {
    e.preventDefault();
  };

  parent.insertBefore(div, select);
  header.appendChild(select);
  div.appendChild(datalist);
  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;

  div.onclick = (e) => {
    if (!multiple) {
      const open = this.hasAttribute("data-open");
      e.stopPropagation();
      if (open) {
        div.removeAttribute("data-open");
      } else {
        div.setAttribute("data-open", "");
      }
    }
  };

  div.onkeyup = (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      div.click();
    }
  };

  document.addEventListener('click', (e) => {
    if (div.hasAttribute("data-open")) {
      div.removeAttribute("data-open");
    }
  });

  const width = Math.max(...Array.from(options).map((e) => {
    span.innerText = e.label;
    return div.offsetWidth;
  }));

  console.log(width);
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = (e) => {
  const data = new FormData(this);
  e.preventDefault();
  submit.innerText = JSON.stringify([...data.entries()]);
};

9;

Di komputer desktop, ada sejumlah cara untuk memilih beberapa opsi dalam elemen _ (mis. g. menggunakan Tab )

Memilih item di bagian atas atau bawah rentang yang ingin mereka pilih menggunakan tombol kursor Atas dan Bawah untuk naik dan turun opsi

Tahan tombol Shift lalu gunakan tombol kursor Atas dan Bawah untuk menambah atau mengurangi rentang item yang dipilih

Pengguna keyboard dapat memilih beberapa item yang tidak bersebelahan

Berfokus pada elemen _ sangat sulit untuk ditata secara produktif dengan CSS. Anda dapat memengaruhi aspek tertentu seperti elemen apa pun — misalnya, memanipulasi model kotak, font yang ditampilkan, dll. , dan Anda dapat menggunakan properti 6

Namun, properti ini tidak menghasilkan hasil yang konsisten di seluruh browser, dan sulit untuk melakukan hal-hal seperti melapisi berbagai jenis elemen formulir satu sama lain dalam kolom. Struktur internal elemen , lihat

Menata formulir HTML
Penataan gaya lanjutan untuk formulir HTML

Lihat juga contoh "Menyesuaikan gaya pilihan" di bawah untuk contoh Anda dapat mencoba gaya

Contoh ini pada dasarnya

Mengkloning konteks _9 hingga id0 dari elemen baru untuk mengelola status dan CSS

Catatan. Tidak semua fitur asli didukung, ini adalah Proof of Concept. TI dimulai dari HTML standar tetapi hasil yang sama dapat dicapai mulai dari data JSON, HTML khusus, atau solusi lainnya

HTML

<form>
  <fieldset>
    <legend>Standard controlslegend>
    <select name="1A" id="select" autocomplete="off" required>
      <option>Carrotsoption>
      <option>Peasoption>
      <option>Beansoption>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosisoption>
    select>
  fieldset>
  <fieldset id="custom">
    <legend>Custom controlslegend>
    <select name="2A" id="select" autocomplete="off" required>
      <option>Carrotsoption>
      <option>Peasoption>
      <option>Beansoption>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosisoption>
    select>
  fieldset>
form>

_

CSS

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

JavaScript

const selects = custom.querySelectorAll('select');
for (const select of selects) {
  const div = document.createElement('div');
  const header = document.createElement('div');
  const datalist = document.createElement('datalist');
  const optgroups = select.querySelectorAll('optgroup');
  const span = document.createElement('span');
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute('multiple');
  function onclick(e) {
    const disabled = this.hasAttribute('data-disabled');
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if (disabled) return;
    if (multiple) {
      if (e.shiftKey) {
        const checked = this.hasAttribute("data-checked");
        if (checked) {
          this.removeAttribute("data-checked");
        } else {
          this.setAttribute("data-checked", "");
        }
      } else {
        const options = div.querySelectorAll('.option');
        for (let i = 0; i < options.length; i++) {
          const option = options[i];
          option.removeAttribute("data-checked");
        }
        this.setAttribute("data-checked", "");
      }
    }
  }

  function onkeyup(e) {
    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode === 13) {
      this.click();
    }
  }

  div.classList.add('select');
  header.classList.add('header');
  div.tabIndex = 1;
  select.tabIndex = -1;
  span.innerText = select.label;
  header.appendChild(span);

  for (const attribute of select.attributes) {
    div.dataset[attribute.name] = attribute.value;
  }
  for (let i = 0; i < options.length; i++) {
    const option = document.createElement('div');
    const label = document.createElement('div');
    const o = options[i];
    for (const attribute of o.attributes) {
      option.dataset[attribute.name] = attribute.value;
    }
    option.classList.add('option');
    label.classList.add('label');
    label.innerText = o.label;
    option.dataset.value = o.value;
    option.dataset.label = o.label;
    option.onclick = onclick;
    option.onkeyup = onkeyup;
    option.tabIndex = i + 1;
    option.appendChild(label);
    datalist.appendChild(option);
  }
  div.appendChild(header);
  for (const o of optgroups) {
    const optgroup = document.createElement('div');
    const label = document.createElement('div');
    const options = o.querySelectorAll('option');

    Object.assign(optgroup, o);
    optgroup.classList.add('optgroup');
    label.classList.add('label');
    label.innerText = o.label;
    optgroup.appendChild(label);
    div.appendChild(optgroup);
    for (const o of options) {
      const option = document.createElement('div');
      const label = document.createElement('div');

      for (const attribute of o.attributes) {
        option.dataset[attribute.name] = attribute.value;
      }
      option.classList.add('option');
      label.classList.add('label');
      label.innerText = o.label;
      option.tabIndex = i + 1;
      option.dataset.value = o.value;
      option.dataset.label = o.label;
      option.onclick = onclick;
      option.onkeyup = onkeyup;
      option.tabIndex = i + 1;
      option.appendChild(label);
      optgroup.appendChild(option);
    }
  }

  div.onclick = (e) => {
    e.preventDefault();
  };

  parent.insertBefore(div, select);
  header.appendChild(select);
  div.appendChild(datalist);
  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;

  div.onclick = (e) => {
    if (!multiple) {
      const open = this.hasAttribute("data-open");
      e.stopPropagation();
      if (open) {
        div.removeAttribute("data-open");
      } else {
        div.setAttribute("data-open", "");
      }
    }
  };

  div.onkeyup = (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      div.click();
    }
  };

  document.addEventListener('click', (e) => {
    if (div.hasAttribute("data-open")) {
      div.removeAttribute("data-open");
    }
  });

  const width = Math.max(...Array.from(options).map((e) => {
    span.innerText = e.label;
    return div.offsetWidth;
  }));

  console.log(width);
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = (e) => {
  const data = new FormData(this);
  e.preventDefault();
  submit.innerText = JSON.stringify([...data.entries()]);
};

Hasil

Kategori konten, , , , , , , dan elemenKonten yang diizinkanNol atau lebih

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

0 atau

<form>
  <fieldset>
    <legend>Standard controlslegend>
    <select name="1A" id="select" autocomplete="off" required>
      <option>Carrotsoption>
      <option>Peasoption>
      <option>Beansoption>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosisoption>
    select>
  fieldset>
  <fieldset id="custom">
    <legend>Custom controlslegend>
    <select name="2A" id="select" autocomplete="off" required>
      <option>Carrotsoption>
      <option>Peasoption>
      <option>Beansoption>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosisoption>
    select>
  fieldset>
form>

4 elemen. Penghilangan tagTidak ada, tag awal dan akhir adalah wajib. Orang tua yang diizinkan Elemen apa pun yang menerima. Peran ARIA implisitid3 tanpa atribut

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

8 dan tanpa atribut

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

9 lebih besar dari 1, jika tidak id6Peran ARIA yang diizinkanid7 tanpa atribut

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

8 dan tidak ada atribut

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dogoption>
      <option value="cat">Catoption>
      <option value="hamster" disabled>Hamsteroption>
    optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrotoption>
      <option value="macaw">Macawoption>
      <option value="albatross">Albatrossoption>
    optgroup>
  select>
label>

9 yang lebih besar dari 1, jika tidak, tidak ada antarmuka 3_______3 yang diizinkan

Fungsi yang Digunakan. .

val() fungsi. Ini menetapkan atau mengembalikan atribut nilai dari elemen yang dipilih

fungsi attr(). Ini menetapkan atau mengembalikan atribut dan nilai dari elemen yang dipilih

Bagaimana Anda menentukan opsi yang dipilih dalam HTML?

Definisi dan Penggunaan . Elemen element is used to create a drop-down list. The

kode html

Bagaimana Anda menetapkan nilai yang dipilih dalam html?

Menghapus pilihan

Mendapatkan larik nilai dari semua elemen opsi

Mengubah nilai elemen value_0

HTML

CSS

JavaScript

Hasil

Bagaimana Anda menetapkan nilai dropdown seperti yang dipilih?

Bagaimana Anda menentukan opsi yang dipilih dalam HTML?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội