jQuery เลือกองค์ประกอบตัวเลือกตามค่า


89

ฉันมีองค์ประกอบที่เลือกห่อด้วยองค์ประกอบช่วง ฉันไม่ได้รับอนุญาตให้ใช้รหัสการเลือก แต่ฉันได้รับอนุญาตให้ใช้รหัสช่วง ฉันกำลังพยายามเขียนฟังก์ชัน javascript / jquery ซึ่งอินพุตเป็นตัวเลข i ซึ่งเป็นหนึ่งในค่าของตัวเลือกของตัวเลือก ฟังก์ชันจะเปลี่ยนตัวเลือกที่เกี่ยวข้องให้เลือก

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

ฉันเขียนบางสิ่งดังต่อไปนี้ (สิ่งนี้ไม่ได้ผลอย่างสมบูรณ์ซึ่งเป็นสาเหตุที่ฉันโพสต์คำถามนี้):

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');

}

ขอบคุณ!

คำตอบ:


150

นี่เป็นวิธีที่ง่ายที่สุดด้วยตัวเลือกที่ชัดเจน:

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

35

ด้วย jQuery> 1.6.1 ควรใช้ไวยากรณ์นี้ดีกว่า:

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

29

เพียงใส่ตัวเลือกของคุณเป็น $ (option) เพื่อให้มันทำงานในแบบที่คุณต้องการ คุณยังสามารถทำให้โค้ดสั้นลงได้โดยทำ

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")


6

คุณสามารถใช้ .val () เพื่อเลือกค่าดังต่อไปนี้:

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

นี่คือ jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/


เบราว์เซอร์ / แพลตฟอร์มใดไม่เหมาะกับคุณ บน Mac / Chrome สามารถเลือกรายการในรายการได้สำเร็จซึ่งตรงกับคำถามเดิม
พรุ่งนี้

@ คุณลามะคุณอาจเข้าใจผิดคำถาม รหัสของ @ tom ทำสิ่งที่ถูกถาม: กำหนดค่าiให้เลือก ith optionในไฟล์select. OP ไม่ได้พยายามกรองตัวเลือก
พอล

4

หากต้องการรับมูลค่าเพียงใช้สิ่งนี้:

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

สิ่งนี้จะดึงค่า


1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}

ขอขอบคุณ! ฉันไม่รู้ว่าการใช้งาน jQuery ภายในคืออะไร แต่โซลูชันอื่น ๆ ดูง่ายกว่า
แร็ป

หากคุณมี jQuery อยู่แล้วสิ่งเหล่านี้จะง่ายกว่า แต่ฉันคิดว่าคุณอาจต้องการทราบวิธีการทำ js ที่บริสุทธิ์
Hogan

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.