jQuery 按值選擇選項元素

Question

我有一個由 span 元素包裹的 select 元素。 我不允許使用 select id，但我可以使用 span id。 我正在嘗試編寫一個 javascript/jquery 函數，其中輸入是一個數字 i，它是 select 選項的值之一。 該功能將選擇相關選項。

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

}

謝謝！

Answer 1

這是帶有明確選擇器的最簡單的解決方案：

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

Answer 2

使用 jQuery > 1.6.1 應該更好地使用這種語法：

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

Answer 3

只需將您的選項包裝在 $(option) 中，使其按您希望的方式運行。 您還可以通過執行使代碼更短

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

Answer 4

您可以使用 .val() 來選擇值，如下所示：

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

這是一個jsfiddle： https ://jsfiddle.net/tweissin/uscq42xh/8/

Answer 5

options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option); 

這是小提琴http://jsfiddle.net/hRFYF/

Answer 6

要獲得價值，只需使用這個：

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

這將獲取值

Answer 7

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

Answer 8

$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);

Answer 9

您可以使用簡單的 javascript 進行更改

 document.querySelector('#h273yrjdfhgsfyiruwyiywer').value='4'

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