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!

Odpowiedzi:


150

Oto najprostsze rozwiązanie z przejrzystym selektorem:

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

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

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


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/


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


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

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);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.