Set select option 'selected', by value
我有一个
我有以下HTML：
1 2 3 4 5 | <select> <option value="val1">Val 1</option> <option value="val2">Val 2</option> <option value="val3">Val 3</option> </select> |
我需要选择值为
这是一个演示页面：http://jsfiddle.net/9stxb/
有一种更简单的方法不需要你进入选项标签：
1 | $("div.id_100 select").val("val2"); |
查看这个jquery方法。
要选择值为"val2"的选项：
1 | $('.id_100 option[value=val2]').attr('selected','selected'); |
选择值后使用
If the field loses focus without the contents having changed, the event is not triggered. To trigger the event manually, apply
.change() without arguments:
1 | $("#select_id").val("val2").change(); |
更多信息位于.change()。
先取消选择所有选项，然后过滤可选选项：
1 2 3 4 | $('.id_100 option') .removeAttr('selected') .filter('[value=val1]') .attr('selected', true) |
1 2 3 4 5 6 7 8 | <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> |
按值设置为挂起状态
1 | $('#contribution_status_id').val("2"); |
对我来说，下面的工作
1 | $("div.id_100").val("val2").change(); |
我认为最简单的方法是选择set val()，但您可以检查以下内容。看看如何在jquery中处理select和option标签？有关选项的详细信息。
1 2 3 | $('div.id_100 option[value="val2"]').prop("selected", true); $('id_100').val('val2'); |
不经过优化，但以下逻辑在某些情况下也很有用。
1 2 3 4 5 | $('.id_100 option').each(function() { if($(this).val() == 'val2') { $(this).prop("selected", true); } }); |
您可以使用属性选择器
1 | $("div.id_100 > select > option[value=" + value +"]").prop("selected",true); |
其中，
如果需要删除任何先前选定的值，如多次使用该值，则需要稍微更改该值，以便首先删除选定的属性。
1 2 3 | $("div.id_100 option:selected").prop("selected",false); $("div.id_100 option[value=" + value +"]") .prop("selected",true); |
简单的答案是，在HTML
1 2 3 4 5 6 | <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上，通过按钮或其他方式调用下面的函数
1 | $('#idUkuran').val(11).change(); |
它很简单，100%的工作，因为它是从我的工作…：)希望有帮助。
最简单的方法是：
HTML1 2 3 4 5 6 | <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
1 | $('select[name="dept"]').val('3'); |
Output: This will activate ENT.
选择值设置后最好使用
1 | $("div.id_100 select").val("val2").change(); |
通过这样做，代码将接近于更改select by user，解释包含在js fiddle中：
JS小提琴
示例选择标记：
1 2 3 4 5 | <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> |
没有理由过多考虑，你所做的就是访问和设置一个属性。就是这样。
好吧，那么一些基本的DOM：如果您是在纯JavaScript中执行此操作，则可以执行以下操作：
1 | window.document.getElementById('my_stuff').selectedIndex = 4; |
但你不是用直接的javascript来做，而是用jquery来做。在jquery中，您希望使用.prop()函数来设置属性，因此您可以这样做：
1 | $("#my_stuff").prop('selectedIndex', 4); |
无论如何，只要确保您的ID是唯一的。否则，你会把头撞在墙上，想知道为什么这不管用。
1 2 3 | var opt = new Option(name, id); $("#selectboxName").append(opt); opt.setAttribute("selected","selected"); |
用途：
1 | $("div.id_100 > select > option[value=" + value +"]").attr("selected",true); |
这对我有用。我正在使用此代码分析FancyBox更新表单中的值，我来自app.js的完整源代码是：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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代码是：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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()：
1 2 3 4 5 6 | $('select#ddlCountry option').each(function () { if ($(this).text().toLowerCase() == co.toLowerCase()) { $(this).prop('selected','selected'); return; } }); |
这对于选择控件是有效的：
1 2 3 4 5 | $('select#ddlCountry option').each(function () { if ($(this).text().toLowerCase() == co.toLowerCase()) { this.selected = true; return; } }); |
只需输入以下代码：
1 | $("#Controls_ID").val(value); |
试试这个。简单而有效的javascript+jquery致命组合。
选择组件：
1 2 3 4 5 6 | <select id="YourSelectComponentID"> <option value="0">Apple</option> <option value="2">Banana</option> <option value="3">Cat</option> <option value="4">Dolphin</option> </select> |
选择：
1 | document.getElementById("YourSelectComponentID").value = 4; |
现在将选择选项4。您可以这样做，以在默认情况下选择开始时的值。
1 2 3 | $(function(){ document.getElementById("YourSelectComponentID").value = 4; }); |
或者创建一个简单的函数，将行放在其中并调用任意事件上的函数来选择选项
jquery+javascript的混合使用有魔力……
是旧的帖子，但这里有一个简单的函数，类似于jquery插件。
1 2 3 4 5 6 7 8 9 10 11 12 | $.fn.selectOption = function(val){ this.val(val) .find('option') .removeAttr('selected') .parent() .find('option[value="'+ val +'"]') .attr('selected', 'selected') .parent() .trigger('change'); return this; }; |
你只要简单一点就可以做到：
1 | $('.id_100').selectOption('val2'); |
再次说明为什么要使用它是因为您将所选的satemant更改为dom什么是CrossBrowser支持的，也会触发更改，使您可以捕获它。
是人类行为模拟的基础。
- 您必须记住要动态更改的值，必须与您在HTML中定义的选项中的值相同，因为它是
case sensative 。您可以按以下方式动态更改选择框：
//value must present in options you selected otherwise it will not work
当动态创建控件而不是在静态HTML页中时，选择下拉控件似乎没有动态更改，这是一个问题。
在jquery中，这个解决方案对我很有效。
1 2 | $('#editAddMake').val(result.data.make_id); $('#editAddMake').selectmenu('refresh'); |
正如附录一样，没有第二行的第一行代码实际上是透明的，在设置索引后检索所选索引是正确的，如果您实际单击了控件，它将显示正确的项，但这不会反映在控件的顶部标签中。
希望这有帮助。
这很好
1 2 3 4 | 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 }); |
最好的方法是这样：
1 | $(`#YourSelect option[value='${YourValue}']`).prop('selected', true); |