値によるjQuery選択オプション要素


89

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

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

}

ありがとう!

回答:


148

明確なセレクターを持つ最も簡単なソリューションは次のとおりです。

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

32

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を指定して、でi番目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の内部実装が何であるかはわかりませんが、他のソリューションはより単純に見えます。
2011

すでにjQueryを持っている場合は簡単ですが、純粋なjsの方法を知りたいと思っているかもしれません。
ホーガン、

0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.