JQuery - як вибрати випадаючий елемент на основі значення


85

Я хочу встановити спадний список (вибір) для зміни залежно від вартості записів.

У мене є

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

І я знаю, що хочу змінити випадаючий список, щоб був обраний варіант зі значенням "fg". Як я можу це зробити за допомогою JQuery?


Я думав, що це все так просто, але, здається, це не спрацювало. Я думаю, настав час налагодження.
Mark W


1
Ваш заголовок трохи вводить в оману. Ви не вибираєте випадаючий список, ви вибираєте варіант у випадаючому списку ... саме тому є 7 відповідей, які мені зовсім не допомагають ...
user1566694

@ user1566694 Якщо ви хочете отримати технічну інформацію, це насправді не називається випадаючим списком, це "вибір"
Mark W

Відповіді:


151

Ви повинні використовувати

$('#dropdownid').val('selectedvalue');

Ось приклад:

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>


21
Погодився з вище. Відповідно до вашого кодексу, це було б$('#mySelect option[value="fg"]').attr('selected', true)
Мартавіс П.

Моя помилка. Я бачив, що це не спрацьовує в деяких випадках, але явно працює в скрипці.
Мартавіс П.

2
Я би просто був обережний із цим. Це не ініціює подію 'change' для тегу <select>. Якщо ви не використовуєте цю подію, це нормально.
Чад Фішер,

2
@ChadFisher Якщо ви використовуєте подію зміни, $('#dropdownid').val('selectedvalue').trigger('change');
Ліам

Справді, зміна тригера допомагає, коли ви написали якийсь наступний код для виконання певних дій, таких як оновлення моделі, навіть оновлення моделі подання ASP.net теж трапляється під час зміни DD. +1
Div Tiwari



8

Ви можете скористатися цим кодом jQuery, який я вважаю більш зручним для використання:

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>


7
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

1
або $ ('# mySelect'). val ('ab'). trigger ("change") ;; на випадок, якщо ви використовуєте плагін select2.
Vaibhav Jain

1
.change () допоміг мені оновити атрибут моделі ASP.net MVC. Дякую за відповідь.
Div Tiwari

Дякую ... .trigger ('change') працює ідеально!
LUISAO



2

Можливо, пізно відповідати, але принаймні хтось отримає допомогу.

Ви можете спробувати два варіанти:

Це результат, коли ви хочете призначити на основі значення індексу, де '0' - індекс.

 $('#mySelect').prop('selectedIndex', 0);

не використовуйте 'attr', оскільки він не підтримується останніми jquery.

Коли ви хочете вибрати на основі значення опції, виберіть це:

 $('#mySelect').val('fg');

де 'fg' - значення опції


Вибір на основі індексу використовується рідко, однак це хороший варіант, враховуючи сценарій, коли ви написали загальний код для встановлення спадних меню, а значення змінюються в залежності від різних DD. Дякую :).
Div Tiwari

1

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>


1

Цей код працював для мене:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

За допомогою цього списку вибору HTML:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

0

У мене інша ситуація, коли значення випадаючого списку вже жорстко закодовані. Є лише 12 районів, тому елемент керування інтерфейсом автозаповнення jQuery не заповнюється кодом.

Рішення набагато простіше. Оскільки мені довелося перебирати інші пости, де передбачалося, що елемент керування динамічно завантажується, я не знайшов того, що мені потрібно, а потім нарешті зрозумів це.

Отже, де у вас є HTML, як показано нижче, встановлення вибраного індексу встановлюється таким чином, зверніть увагу на частину -input, яка є додатком до випадаючого ідентифікатора:

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

Щось ще з’ясовано в елементі керування автозаповненням - це те, як його правильно відключити / очистити. У нас є 3 елементи управління, які працюють разом, 2 з них взаємовиключні:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

Дещо з цього виходить за рамки поста, і я не знаю, куди його точно помістити. Оскільки це дуже корисно, і на це знадобився певний час, цим ми ділимось.

Також також ... щоб увімкнути такий контроль, це (вимкнено, помилково), а НЕ (увімкнено, правда) - це також зайняло трохи часу, щоб зрозуміти. :)

Єдине, на що слід звернути увагу, на додаток до публікації, це:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

Всі поділились, бо надто довго вчилися цим речам на льоту. Сподіваюся, це корисно.


Ви тут далеко відійшли від теми. Питання полягає в простій зміні вибору на основі його значення за допомогою JQuery. Тут не задіяні елементи інтерфейсу.
Mark W


0

Ви можете вибрати значення параметра випадаючого списку за назвою

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.