jQuery memilih elemen opsi berdasarkan nilai

89

Saya memiliki elemen pilih yang dibungkus oleh elemen span. Saya tidak diizinkan menggunakan id pilihan tetapi saya diizinkan menggunakan id span. Saya mencoba menulis fungsi javascript / jquery di mana inputnya adalah angka i, yang merupakan salah satu nilai opsi pilih. Fungsi ini akan mengubah opsi yang relevan menjadi yang dipilih.

<span id="span_id">
    <select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
        <option value="1">cleaning</option>
        <option value="2">food-2</option>
        <option value="3">toilet</option>
        <option value="4">baby</option>
        <option value="6">knick-knacks</option>
        <option value="9">junk-2</option>
        <option value="10">cosmetics</option>
    </select>
</span>

Saya menulis sesuatu sebagai berikut (ini tidak sepenuhnya berfungsi, itulah sebabnya saya memposting pertanyaan ini):

function select_option(i) {

    options = $('#span_id').children('select').children('option');
    //alert(options.length); //7
    //alert(options[0]); //[object HTMLOptionElement]
    //alert(options[0].val()); //not a jquery element
    //alert(options[0].value); //1

    //the following does not seem to work since the elements of options are DOM ones not jquery's
    option = options.find("[value='" + i + "']");
    //alert(option.attr("value")); //undefined
    option.attr('selected', 'selected');

}

Terima kasih!

penuh
sumber

Jawaban:

149

Inilah solusi paling sederhana dengan pemilih yang jelas:

function select_option(i) {
  return $('span#span_id select option[value="' + i + '"]').html();
}
jonathan.cone
sumber
34

Dengan jQuery> 1.6.1 sebaiknya lebih baik menggunakan sintaks ini:

$('#span_id select option[value="' + some_value + '"]').prop('selected', true);
damoiser
sumber
29

Cukup bungkus opsi Anda dalam $ (opsi) untuk membuatnya bertindak seperti yang Anda inginkan. Anda juga dapat mempersingkat kode dengan melakukan

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
Adrian Rodriguez
sumber
6
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option); 

ini biola http://jsfiddle.net/hRFYF/

Rafay
sumber
6

Anda dapat menggunakan .val () untuk memilih nilai, seperti berikut:

function select_option(i) {
    $("#span_id select").val(i);
}

Ini adalah jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

tom
sumber
Di browser / platform mana yang tidak berfungsi untuk Anda? Di Mac / Chrome, itu berhasil memilih item dalam daftar, yang persis seperti pertanyaan aslinya.
tom
@ Tn. Llama, Anda mungkin salah paham dengan pertanyaannya. Kode @ tom melakukan apa yang diminta: diberi nilai i, pilih ith optiondi select. OP tidak mencoba memfilter opsi.
Paul
4

Untuk mendapatkan nilainya cukup gunakan ini:

<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>

<script>
function getvalue()
{
    alert($("#ari_select option:selected").val()); 
}
</script>

ini akan mengambil nilainya

Arijit Ghosh
sumber
1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}
Hogan
sumber
Terima kasih! Saya tidak tahu apa implementasi internal jQuery, tetapi solusi lainnya terlihat lebih sederhana.
rapt
Jika Anda sudah memiliki jQuery itu lebih mudah, tetapi saya pikir Anda mungkin ingin tahu cara js murni untuk melakukannya.
Hogan
0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
rsc
sumber