按值设置选择选项'selected'-Java 学习之路

758

我有一个 select 字段，其中包含一些选项 . 现在我需要用jQuery选择其中一个 options . 但是，当我只知道必须选择的 option 的 value 时，我怎么能这样做呢？

我有以下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/

21 回答

30
有一种更简单的方法，不需要你进入options标签：
```
$("div.id_100 select").val("val2");
```
看看这个jQuery method .
回复于 2024-04-30T09:01:54+08:00
6
要选择值为'val2'的选项：
```
$('.id_100 option[value=val2]').attr('selected','selected');
```
回复于 2024-04-30T09:01:54+08:00
7
选择值后使用 change() 事件 . 来自文档：

如果字段在没有更改内容的情况下失去焦点，则不会触发事件 . 要手动触发事件，请在不带参数的情况下应用.change（）：
```
$("#select_id").val("val2").change();
```
更多信息请访问.change() .
回复于 2024-04-30T09:01:54+08:00

首先取消选择全部并过滤可选选项：

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

回复于 2024-04-30T09:01:54+08:00

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

回复于 2024-04-30T09:01:54+08:00

7
对我来说，以下是这项工作
```
$("div.id_100").val("val2").change();
```
回复于 2024-04-30T09:01:54+08:00
24
我认为最简单的方法是选择设置val（），但您可以检查以下内容 . 有关选项的更多详细信息，请参见How to handle select and option tag in 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);
    }
});
```
回复于 2024-04-30T09:01:54+08:00
213
您可以使用属性选择器 [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);
```
回复于 2024-04-30T09:01:54+08:00

一个简单的答案是，在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％有效，因为它取自我的工作...... :)希望它的帮助..

回复于 2024-04-30T09:01:54+08:00

最简单的方法是：

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

输出：这将激活ENT .

回复于 2024-04-30T09:01:54+08:00

12
设置选择值后最好使用 change() .
```
$("div.id_100 select").val("val2").change();
```
通过这样做，代码将接近用户更改选择，解释包含在_857735中：

JS Fiddle
回复于 2024-04-30T09:01:54+08:00

1233

使用：

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

回复于 2024-04-30T09:01:54+08:00

336

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

回复于 2024-04-30T09:01:54+08:00

.attr（）有时在较旧的jQuery版本中不起作用，但您可以使用 .prop() ：

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

回复于 2024-04-30T09:01:54+08:00

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

这适用于 #graphtype 是select标记的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>

回复于 2024-04-30T09:01:54+08:00

11
没有理由去讨论这个问题，你所做的只是访问和设置一个属性 . 而已 .

Okay, so some basic dom: 如果你是用直接的JavaScript做的，你会这样：
```
window.document.getElementById('my_stuff').selectedIndex = 4;
```
但你不是用直接的JavaScript做的，而是用jQuery做的 . 在jQuery中，您希望使用.prop（）函数来设置属性，因此您可以这样做：
```
$("#my_stuff").prop('selectedIndex', 4);
```
无论如何，只要确保你的id是唯一的 . 否则，你会在墙上撞到脑袋，想知道为什么这不起作用 .
回复于 2024-04-30T09:01:54+08:00

这肯定适用于 Select Control ：

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

回复于 2024-04-30T09:01:54+08:00

7
只需输入以下代码：
```
$("#Controls_ID").val(value);
```
回复于 2024-04-30T09:01:54+08:00

试试这个 . 简单而有效的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的混合物带来了魔力....

回复于 2024-04-30T09:01:54+08:00

是旧帖子，但这里是一个简单的功能，像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，并且还会触发更改，你可以捕获它 .

是基本的人类动作模拟 .

回复于 2024-04-30T09:01:54+08:00

2
- 您必须牢记要动态更改的值，必须与您在HTML中定义的选项中的值相同，因为它是 case sensative . 您可以动态更改选择框，如下所示，
$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work
回复于 2024-04-30T09:01:54+08:00

按值设置选择选项'selected'

21 回答

HTML

jQuery

相关问题