Встановіть опцію вибору "вибрано" за значенням

У мене є selectполе з деякими варіантами. Тепер мені потрібно вибрати один із тих, хто optionsмає jQuery. Але як я можу це зробити, коли знаю лише valueте, optionщо має бути обране?

У мене є такий HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Мені потрібно вибрати варіант зі значенням val2. Як це можна зробити?

Ось демонстраційна сторінка: http://jsfiddle.net/9Stxb/

Є простіший спосіб, який не вимагає від вас заходити в тег параметрів:

$("div.id_100 select").val("val2");

Перевірте цей метод jQuery .

Щоб вибрати варіант зі значенням 'val2':

$('.id_100 option[value=val2]').attr('selected','selected');

Використовуйте change()подію після вибору значення. З документів:

Якщо поле втрачає фокус без змісту вмісту, подія не запускається. Щоб запустити подію вручну, застосуйте .change()без аргументів:

$("#select_id").val("val2").change();

Більше інформації можна знайти на .change () .

Повторно зніміть вибір і відфільтруйте вибрані параметри:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Установка статусу очікування за значенням

   $('#contribution_status_id').val("2");

Для мене справи зробили наступне

$("div.id_100").val("val2").change();

Я думаю, що найпростіший спосіб - це встановити val (), але ви можете перевірити наступне. Див. Розділ Як обробляти теги вибору та параметрів у jQuery? для отримання детальної інформації про варіанти.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

Не оптимізовано, але наступна логіка також корисна в деяких випадках.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Ви можете вибрати будь-який атрибут та його значення, скориставшись селектором атрибутів [attributename=optionalvalue], тому у вашому випадку ви можете вибрати параметр та встановити вибраний атрибут.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

Де valueзначення, яке ви хочете вибрати.

Якщо вам потрібно видалити будь-які попередні вибрані значення, як це було б у випадку, якщо це використовується кілька разів, вам потрібно буде трохи змінити його, щоб спочатку видалити вибраний атрибут

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

Найкращий спосіб такий:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

проста відповідь - у html

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

на jquery, зателефонуйте нижче за функцією за допомогою кнопки чи будь-чого іншого

$('#idUkuran').val(11).change();

це просто і на 100% працює, тому що його взяли з моєї роботи ... :) сподіваюсь на допомогу ..

Немає причин це думати, все, що ви робите, - це доступ та налаштування власності. Це воно.

Гаразд, такий базовий дім: якби ви робили це в прямому JavaScript, це було б так:

window.document.getElementById('my_stuff').selectedIndex = 4;

Але ви не робите це з прямим JavaScript, ви робите це з jQuery. І в jQuery ви хочете використовувати функцію .prop () для встановлення властивості, так що ви зробите це так:

$("#my_stuff").prop('selectedIndex', 4);

У будь-якому випадку, просто переконайтесь, що ваш ідентифікатор унікальний. В іншому випадку ви будете стукати головою об стіну, цікавлячись, чому це не працює.

Найпростіший спосіб зробити це:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Вихід: Це активує ЛОР .

Краще використовувати change()після встановлення значення вибору.

$("div.id_100 select").val("val2").change();

Роблячи це, код закриється до зміни вибору користувачем, пояснення включено в JS Fiddle :

JS Fiddle

$('#graphtype option[value=""]').prop("selected", true);

Це добре працює, де #graphtypeідентифікатор тегу select.

Приклад вибору тегу:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

Використання:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

Це працює для мене. Я використовую цей код для розбору значення у формі оновлення fancybox, і моє повне джерело з app.js:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

І мій PHP-код:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

.attr () іноді не працює у старих версіях jQuery, але ви можете використовувати .prop () :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

Це точно працює для Select Control :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

Просто введіть цей код:

$("#Controls_ID").val(value);

Посилання на джерело

Використовуйте метод val () jQuery для вибору одного та декількох значень у DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

Спробуйте це. Простий, але ефективний javaScript + jQuery смертельному комбо.

SelectComponent:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Вибір:

document.getElementById("YourSelectComponentID").value = 4;

Тепер буде обраний ваш варіант 4. Ви можете зробити це, щоб вибрати значення при запуску за замовчуванням.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

або створити просту функцію, поставити в неї рядок і викликати функцію на anyEvent, щоб вибрати варіант

Суміш jQuery + javaScript робить магію ....

Це стара публікація, але ось одна проста функція, яка діє як плагін jQuery.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

Ви просто можете зробити щось подібне:

$('.id_100').selectOption('val2');

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

Це в основному імітація дій людини.

• Ви повинні мати на увазі значення, яке ви хочете динамічно змінити, воно повинно бути таким же, як присутні в параметрах, визначених у вашому HTML, як воно є case sensative. Ви можете змінити вибране поле динамічно наступним чином,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

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

У jQuery це рішення працювало на мене.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

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

Сподіваюсь, це допомагає.

Проблема, у яку я зіткнувся, коли значення - це ідентифікатор, а текст - код. Ви не можете встановити значення за допомогою коду, але у вас немає прямого доступу до ідентифікатора.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here

це працює для мене

$("#id_100").val("val2");

Це добре працює

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });