2011-09-03 126 views
76

我有一個由span元素包裝的select元素。我不允許使用選擇標識,但我可以使用span標識。 我想寫一個javascript/jquery函數,其中的輸入是一個數字我,這是選擇的選項的值之一。該功能將相關選項變爲選中狀態。jQuery按值選擇選項元素

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

} 

謝謝!

回答

124

這裏有一個明確的選擇最簡單的辦法:

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

謝謝!精彩的技術! – rapt

28

只需在$(選項)中包裝您的選項,使其按您希望的方式行事。您也可以使代碼更短做

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

謝謝!我絕對學到了一些新東西! – rapt

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

謝謝!我不知道jQuery的內部實現是什麼,但其他解決方案看起來更簡單。 – rapt

+0

如果你已經有jQuery這些更容易,但我想你可能想知道一個純粹的js做法。 – Hogan

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> 

這將獲取值

24

使用jQuery> 1.6.1應該更好地使用這個語法:

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

您可以使用.VAL()選擇相應的值,如以下:

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

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

+0

小提琴不起作用 – enkash

+0

現在應該工作,不知道發生了什麼。 – tom

+0

在哪個瀏覽器/平臺上它不適合你?在Mac/Chrome上,它成功選擇了列表中的一個項目,這正是原始問題所在。 – tom