Bagaimana cara saya mengatur nilai elemen kotak pilih menggunakan pemrograman JavaScript?

Saya memiliki <select>elemen HTML berikut :

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

Menggunakan fungsi JavaScript dengan leaveCodeangka sebagai parameter, bagaimana cara memilih opsi yang sesuai dalam daftar?

Anda dapat menggunakan fungsi ini:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

Jika Anda menggunakan jQuery, Anda juga dapat melakukan ini:

$('#leaveCode').val('14');

Ini akan memilih <option>dengan nilai 14.

Dengan Javascript biasa, ini juga dapat dicapai dengan dua Documentmetode :

• Dengan document.querySelector, Anda dapat memilih elemen berdasarkan pemilih CSS:

  document.querySelector('#leaveCode').value = '14'

• Menggunakan pendekatan yang lebih mapan dengan document.getElementById(), yang akan, sesuai dengan nama fungsi, memungkinkan Anda memilih elemen berdasarkan id:

  document.getElementById('leaveCode').value = '14'

Anda dapat menjalankan kode di bawah ini untuk melihat metode ini dan fungsi jQuery dalam aksi:

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

Tidak menjawab pertanyaan, tetapi Anda juga dapat memilih berdasarkan indeks, di mana saya adalah indeks dari item yang ingin Anda pilih:

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

Anda juga dapat mengulang item untuk memilih berdasarkan nilai tampilan dengan loop:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

Saya membandingkan berbagai metode:

Perbandingan berbagai cara tentang cara menetapkan nilai pilih dengan JS atau jQuery

kode:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

Output pada pilih dengan ~ 4000 elemen:

• 1 ms
• 58 ms
• 612 ms

Dengan Firefox 10. Catatan: Satu-satunya alasan saya melakukan tes ini, adalah karena jQuery berkinerja sangat buruk pada daftar kami dengan ~ 2000 entri (mereka memiliki teks yang lebih panjang di antara opsi-opsi). Kami mengalami keterlambatan sekitar 2 detik setelah val ()

Catatan juga: Saya menetapkan nilai tergantung pada nilai sebenarnya, bukan nilai teks.

document.getElementById('leaveCode').value = '10';

Itu harus mengatur seleksi ke "Cuti Tahunan"

Saya mencoba solusi berbasis JavaScript / jQuery di atas, seperti:

$("#leaveCode").val("14");

dan

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

dalam aplikasi AngularJS, di mana ada elemen <select> yang diperlukan .

Tidak ada yang berfungsi, karena validasi formulir AngularJS tidak dipecat. Meskipun opsi yang tepat telah dipilih (dan ditampilkan dalam formulir), input tetap tidak valid (kelas ng-murni dan ng-tidak valid masih ada).

Untuk memaksa validasi AngularJS, panggil perubahan jQuery () setelah memilih opsi:

$("#leaveCode").val("14").change();

dan

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

Cara termudah jika Anda perlu:
1) Klik tombol yang mendefinisikan opsi pilih
2) Pergi ke halaman lain, di mana opsi pilih adalah
3) Apakah nilai opsi itu dipilih pada halaman lain

1) tautan tombol Anda (misalnya, di beranda)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(di mana contact.php adalah halaman Anda dengan opsi pilih. Perhatikan url halaman memiliki? option = 1 atau 2)

2) letakkan kode ini di halaman kedua Anda (case. contact.php saya )

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3) membuat nilai opsi dipilih, tergantung pada tombol yang diklik

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. dan seterusnya.
Jadi ini adalah cara mudah untuk meneruskan nilai ke halaman lain (dengan daftar opsi pilih) melalui GET di url. Tidak ada formulir, tidak ada ID .. hanya 3 langkah dan itu berfungsi sempurna.

Mengapa tidak menambahkan variabel untuk ID elemen dan menjadikannya fungsi yang dapat digunakan kembali?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}

Misalkan formulir Anda bernama form1 :

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

Seharusnya ada sesuatu seperti ini:

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}

Jika menggunakan PHP Anda dapat mencoba sesuatu seperti ini:

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

Anda kemungkinan besar menginginkan ini:

$("._statusDDL").val('2');

ATAU

$('select').prop('selectedIndex', 3); 

function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}

Saya khawatir saya tidak dapat menguji ini saat ini, tetapi di masa lalu, saya percaya saya harus memberikan setiap opsi tag ID, dan kemudian saya melakukan sesuatu seperti:

document.getElementById("optionID").select();

Jika itu tidak berhasil, mungkin itu akan membuat Anda lebih dekat ke solusi: P