jQuery wybiera elementy opcji według wartości

89

Mam wybrany element zawinięty w element span. Nie wolno mi używać identyfikatora wyboru, ale wolno mi używać identyfikatora zakresu. Próbuję napisać funkcję javascript / jquery, w której dane wejściowe to liczba i, która jest jedną z wartości opcji select. Funkcja zmieni odpowiednią opcję na wybraną.

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

Napisałem coś następująco (to nie do końca działa, dlatego piszę to pytanie):

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

}

Dzięki!

skupiony
źródło

Odpowiedzi:

150

Oto najprostsze rozwiązanie z przejrzystym selektorem:

function select_option(i) {
  return $('span#span_id select option[value="' + i + '"]').html();
}
jonathan.cone
źródło
34

Z jQuery> 1.6.1 powinno być lepiej użyć następującej składni:

$('#span_id select option[value="' + some_value + '"]').prop('selected', true);
damoiser
źródło
29

Po prostu zawiń swoją opcję w $ (opcja), aby działała tak, jak chcesz. Możesz także skrócić kod, wykonując

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
Adrian Rodriguez
źródło
6
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option); 

tutaj jest skrzypce http://jsfiddle.net/hRFYF/

Rafay
źródło
6

Możesz użyć .val (), aby wybrać wartość, na przykład:

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

Oto jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

Tomek
źródło
Na jakiej przeglądarce / platformie to nie działa? W systemie Mac / Chrome pomyślnie wybiera element z listy, czyli dokładnie to, co było w pierwotnym pytaniu.
jutro
@ Panie Lama, mógł pan źle zrozumieć pytanie. Kod @ tom robi to, o co proszono: mając podaną wartość i, wybierz i-ty optionw select. OP nie próbował filtrować opcji.
Paul
4

Aby uzyskać wartość, użyj tego:

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

spowoduje to pobranie wartości

Arijit Ghosh
źródło
1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}
Hogan
źródło
Dziękuję Ci! Nie wiem, na czym polega wewnętrzna implementacja jQuery, ale inne rozwiązania wyglądają na prostsze.
zachwycony
Jeśli masz już jQuery, są one łatwiejsze, ale pomyślałem, że możesz chcieć poznać sposób robienia tego w czystym js.
Hogan,
0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
rsc
źródło