jQuery виберіть елементи опції за значенням


89

У мене є елемент select, обгорнутий елементом span. Мені заборонено використовувати ідентифікатор select, але мені дозволено використовувати id span. Я намагаюся написати функцію javascript / jquery, в якій введенням є число i, яке є одним із значень параметрів вибору. Функція перетворить відповідний параметр у вибраний.

<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 він успішно вибирає елемент у списку, саме таким було вихідне запитання.
том

@ Mr.Llama, можливо, ви неправильно зрозуміли питання. Код @ 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, але інші рішення виглядають простішими.
схоплений

Якщо у вас вже є jQuery, це простіше, але я зрозумів, що ви, можливо, захочете знати чистий js-спосіб.
Хоган

0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.