it-swarm-id.com

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

Saya memiliki elemen <select> 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 nomor leaveCode sebagai parameter, bagaimana cara memilih opsi yang sesuai dalam daftar?

343
brasskazoo
SelectElement("leaveCode", valueToSelect)

function SelectElement(id, valueToSelect)
{    
    var element = document.getElementById(id);
    element.value = valueToSelect;
}
438
Mitchel Sellers

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 metode DocumentNAME_ :

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

    document.querySelector('#leaveCode').value = '14'
    
  • Dengan menggunakan pendekatan yang lebih mapan dengan document.getElementById() , yang akan, sesuai dengan nama fungsi, memungkinkan Anda memilih elemen berdasarkan idname__-nya:

    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>
98
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

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;
14
Chase Seibert

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

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

Itu harus mengatur seleksi ke "Cuti Tahunan"

9
William

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 yang diperlukan <select>.

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

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

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

dan

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

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

Cara termudah jika Anda perlu:
1) Klik tombol yang mendefinisikan opsi pilih
2) Pergi ke halaman lain, tempat opsi pilih berada
3) Biarkan nilai opsi itu dipilih di 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 (kasing saya contact.php)

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

) 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.

3
Lana

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;
}
1
Stephen Wrighton

Misalkan formulir Anda dinamai form1:

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}
1
Milan Babuškov

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;
}
1
Robert Swisher

Anda kemungkinan besar menginginkan ini:

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

OR

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