ตั้งค่าตัวเลือกเลือก 'เลือก' ตามค่า

ฉันมี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% เพราะมันเอามาจากการทำงานของฉัน ... :) หวังว่ามันจะช่วย ..

ไม่มีเหตุผลที่จะต้องคิดเรื่องนี้สิ่งที่คุณทำคือการเข้าถึงและการตั้งค่าคุณสมบัติ แค่นั้นแหละ.

ตกลงดังนั้นพื้นฐาน dom: ถ้าคุณทำใน JavaScript ตรงนี้คุณจะ:

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

แต่คุณไม่ได้ใช้ JavaScript โดยตรงคุณกำลังทำกับ jQuery และใน jQuery คุณต้องการใช้ฟังก์ชัน. prop () เพื่อตั้งค่าคุณสมบัติดังนั้นคุณจะทำดังนี้:

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

อย่างไรก็ตามให้แน่ใจว่า ID ของคุณไม่ซ้ำกัน มิฉะนั้นคุณจะกระแทกหัวกับกำแพงสงสัยว่าทำไมสิ่งนี้ถึงไม่ได้ผล

วิธีที่ง่ายที่สุดที่จะทำคือ:

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

ใช้งานได้ดีโดยที่#graphtypeid ของแท็กที่เลือกอยู่

ตัวอย่างแท็กเลือก:

 <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 แบบเรียบง่ายและมีประสิทธิภาพ

เลือกส่วนประกอบ:

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

Reson เหตุใดจึงใช้สิ่งนี้เพราะคุณเปลี่ยน satemant ที่เลือกเป็น DOM คืออะไร crossbrowser รองรับและจะทริกเกอร์การเปลี่ยนแปลงที่คุณสามารถจับได้

เป็นการจำลองการกระทำของมนุษย์ที่มีพื้นฐาน

• คุณต้องใช้มันในใจค่าที่คุณต้องการการเปลี่ยนแปลงแบบไดนามิกจะต้องเหมือนกันเป็นหนึ่งอยู่ในตัวเลือกที่คุณกำหนดใน 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');

เช่นเดียวกับภาคผนวกของบรรทัดแรกของรหัสที่ไม่มีบรรทัดที่สองทำงานจริง ๆ ในการเรียกดูดัชนีที่เลือกนั้นถูกต้องหลังจากตั้งค่าดัชนีและถ้าคุณคลิกที่ตัวควบคุมมันจะแสดงรายการที่ถูกต้อง แต่สิ่งนี้ไม่ได้สะท้อน ในป้ายกำกับด้านบนของตัวควบคุม

หวังว่านี่จะช่วยได้

ปัญหาที่ฉันพบเมื่อค่าเป็น ID และข้อความคือรหัส คุณไม่สามารถตั้งค่าโดยใช้รหัส แต่คุณไม่สามารถเข้าถึง ID ได้โดยตรง

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