2011-09-03 11 views
76

私は選択要素をspan要素でラップしています。私は選択IDを使用することはできませんが、私はスパンIDを使用することができます。 私は、入力が選択肢のオプションの値の1つである数値iであるjavascript/jquery関数を記述しようとしています。関連するオプションが選択されます。jQuery selectオプション要素by値

<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

は明確なセレクタで最も簡単な解決策ですさ値を取得するには、これを使用してください:

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

これはjQueryを使って値

+0

ありがとう!素敵なテクニック! – rapt

28

オプションを$(オプション)にラップするだけで、あなたが望むように動作させることができます。

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

ありがとうございました!私は間違いなく新しいことを学びました! – rapt

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

を行うことで、コードを短くすることができますここでフィドルhttp://jsfiddle.net/hRFYF/

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

へ:あなたもここで

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

を取得します> 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