name - jquery selector id like




按值設置選擇選項'selected' (14)

我有一個select字段,其中有一些選項。 現在我需要使用jQuery選擇其中一個options 。 但是當我只知道必須選擇的optionvalue時,我該怎麼做?

我有以下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/ : http://jsfiddle.net/9Stxb/


.attr()有時不適用於較老的jQuery版本,但可以使用.prop()

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

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

這適用於#graphtype是選擇標記的ID。

示例選擇標籤:

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

使用:

$("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));
}

只需輸入以下代碼:

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

好吧,我意識到這篇文章是古老的,但是對此的一些回應比壞的更糟。 甚至可怕。 而且我拒絕不要回應這個海盜在這個線程上蔑視其他海報的說法。

沒有理由用無盡的發現和選擇來解決這個問題。 這非常簡單。 你所做的只是訪問和設置一個屬性。 而已。

好吧,那麼一些基本的dom:如果你是用直接的Javascript來做這件事,那麼你會這樣做:

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

但是你並沒有用直接的Javascript來做,而是用Jquery來完成它。 在Jquery中,上帝保佑它,你想使用.prop()函數來設置一個屬性。 我想這是有道理的。 所以,你會這樣做。

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

看到? 那真的很難嗎?

無論如何,只要確保你的ID是唯一的。 否則,你會在牆上敲你的頭,想知道為什麼這不起作用。


對我來說,下面的工作完成了

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

我認為最簡單的方法是選擇設置val(),但您可以檢查以下內容。 請參閱如何處理jQuery中的select和option標籤? 了解更多關於選項的細節。

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

是舊的帖子,但這裡是一個簡單的功能,像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為什麼使用這個功能是因為您將選定的狀態更改為DOM支持的交叉瀏覽器,並且會觸發更改,以便您可以捕獲它。

是基本的人類行動模擬。


有一種更簡單的方法,不需要您進入選項標籤:

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

看看這個jQuery方法


要選擇值為'val2'的選項:

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

這適用於選擇控制

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

選擇該值後使用change()事件。 從文檔:

如果該字段失去焦點而內容沒有改變,則該事件不會被觸發。 要手動觸發事件,請應用.change()而不帶參數:

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

更多信息在.change()


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

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




html-select