Đặt tùy chọn chọn 'đã chọn', theo giá trị

Tôi có một selectlĩnh vực với một số tùy chọn trong đó. Bây giờ tôi cần chọn một trong số đó optionsvới jQuery. Nhưng làm thế nào tôi có thể làm điều đó khi tôi chỉ biết valuecái optionnào phải được chọn?

Tôi có HTML sau:

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

Tôi cần chọn tùy chọn có giá trị val2. Điều này có thể giải quyết như thế nào?

Đây là trang demo: http://jsfiddle.net/9Stxb/

Có một cách dễ dàng hơn mà không yêu cầu bạn đi vào thẻ tùy chọn:

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

Hãy xem phương thức jQuery này .

Để chọn một tùy chọn có giá trị 'val2':

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

Sử dụng change()sự kiện sau khi chọn giá trị. Từ các tài liệu:

Nếu trường mất tiêu điểm mà không thay đổi nội dung, sự kiện sẽ không được kích hoạt. Để kích hoạt sự kiện theo cách thủ công, hãy áp dụng .change()mà không cần đối số:

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

Thêm thông tin tại .change () .

Bỏ chọn tất cả trước và lọc các tùy chọn có thể chọn:

$('.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>

Đặt thành Trạng thái chờ xử lý theo giá trị

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

Đối với tôi sau đây đã làm công việc

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

Tôi nghĩ cách dễ nhất là chọn đặt val (), nhưng bạn có thể kiểm tra như sau. Xem Cách xử lý thẻ chọn và tùy chọn trong jQuery? để biết thêm chi tiết về các lựa chọn.

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

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

Không được tối ưu hóa, nhưng logic sau đây cũng hữu ích trong một số trường hợp.

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

Bạn có thể chọn bất kỳ thuộc tính nào và giá trị của nó bằng cách sử dụng bộ chọn thuộc tính [attributename=optionalvalue], vì vậy trong trường hợp của bạn, bạn có thể chọn tùy chọn và đặt thuộc tính đã chọn.

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

Đâu valuelà giá trị bạn muốn chọn.

Nếu bạn cần xóa bất kỳ giá trị đã chọn nào trước đó, như trường hợp này sẽ được sử dụng nhiều lần, bạn cần thay đổi nó một chút để trước tiên xóa thuộc tính đã chọn

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

Cách tốt nhất là như thế này:

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

một câu trả lời đơn giản là, tại 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>

trên jquery, gọi chức năng bên dưới bằng nút hoặc bất cứ điều gì

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

nó đơn giản và hoạt động 100%, vì nó được lấy từ công việc của tôi ... :) hy vọng sự giúp đỡ của nó ..

Không có lý do gì để lật đổ điều này, tất cả những gì bạn đang làm là truy cập và thiết lập một tài sản. Đó là nó.

Được rồi, vì vậy một số dom cơ bản: Nếu bạn đang làm điều này bằng JavaScript thẳng, bạn sẽ làm điều này:

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

Nhưng bạn không làm điều đó với JavaScript thẳng, bạn đang làm điều đó với jQuery. Và trong jQuery, bạn muốn sử dụng hàm .prop () để đặt thuộc tính, vì vậy bạn sẽ làm như thế này:

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

Dù sao, chỉ cần chắc chắn rằng id của bạn là duy nhất. Nếu không, bạn sẽ đập đầu vào tường tự hỏi tại sao điều này không hiệu quả.

Cách dễ nhất để làm điều đó là:

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

Đầu ra: Điều này sẽ kích hoạt ENT .

Tốt hơn là sử dụng change()sau khi cài đặt giá trị chọn.

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

Bằng cách này, mã sẽ gần với việc thay đổi lựa chọn của người dùng, lời giải thích được bao gồm trong JS Fiddle :

Fiddle

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

Điều này hoạt động tốt nơi #graphtypeid của thẻ chọn.

ví dụ chọn thẻ:

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

Sử dụng:

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

Điều này làm việc cho tôi. Tôi đang sử dụng mã này để phân tích giá trị trong biểu mẫu cập nhật Fancybox và nguồn đầy đủ của tôi từ app.js là:

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

Và mã PHP của tôi là:

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 () đôi khi không hoạt động trong các phiên bản jQuery cũ hơn, nhưng bạn có thể sử dụng .prop () :

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

Điều này hoạt động chắc chắn cho Chọn điều khiển :

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

Chỉ cần đặt mã này:

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

Liên kết nguồn

Sử dụng phương thức jQuery () cho lựa chọn đơn và nhiều giá trị trong 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>

Thử cái này. Đơn giản nhưng hiệu quả javaScript + jQuery kết hợp gây chết người.

Chọn thành phần:

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

Lựa chọn:

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

Bây giờ tùy chọn 4 của bạn sẽ được chọn. Bạn có thể làm điều này, để chọn các giá trị khi bắt đầu theo mặc định.

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

hoặc tạo một hàm đơn giản, đặt dòng trong đó và gọi hàm trên anyEvent để chọn tùy chọn

Một hỗn hợp của jQuery + javaScript thực hiện phép thuật ....

Đây là bài viết cũ nhưng đây là một chức năng đơn giản hoạt động như plugin 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;
    };

Bạn chỉ cần đơn giản có thể làm một cái gì đó như thế này:

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

Reson tại sao sử dụng điều này là do bạn thay đổi sitterant đã chọn thành DOM, crossbrowser được hỗ trợ và cũng sẽ kích hoạt thay đổi để bạn có thể bắt được nó.

Là mô phỏng hành động cơ bản của con người.

• Bạn phải ghi nhớ giá trị bạn muốn thay đổi linh hoạt, phải giống với giá trị hiện tại trong các tùy chọn bạn xác định trong HTML như hiện tại case sensative. Bạn có thể thay đổi hộp chọn của mình một cách linh hoạt như sau,

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

Dường như có một vấn đề với các điều khiển thả xuống được chọn không thay đổi động khi các điều khiển được tạo động thay vì nằm trong một trang HTML tĩnh.

Trong jQuery giải pháp này làm việc cho tôi.

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

Giống như phần phụ lục, dòng mã đầu tiên không có dòng thứ hai, thực sự hoạt động một cách minh bạch trong đó, lấy chỉ mục được chọn là chính xác sau khi đặt chỉ mục và nếu bạn thực sự nhấp vào điều khiển, nó sẽ hiển thị mục chính xác nhưng điều này không phản ánh trong nhãn hàng đầu của điều khiển.

Hi vọng điêu nay co ich.

Một vấn đề tôi gặp phải khi giá trị là ID và văn bản là mã. Bạn không thể đặt giá trị bằng mã nhưng bạn không có quyền truy cập trực tiếp vào ID.

var value;

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

//Do work here

nó làm việc cho tôi

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

Điều này hoạt động tốt

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