使用jQuery以编程方式在<select>中选择<option>
使用jQuery以编程方式在<select>中选择<option>，可以使用以下方法：
- 使用
val()方法设置<select>元素的值：
$("select").val("value");其中，value是<option>元素的值属性。
- 使用
prop()方法设置<option>元素的selected属性：
$("option[value='value']").prop("selected", true);其中，value是<option>元素的值属性。
- 使用
eq()方法根据索引选择<option>：
$("select option").eq(index).prop("selected", true);其中，index是<option>元素在<select>中的索引。
- 使用
text()方法根据文本选择<option>：
$("select option:contains('text')").prop("selected", true);其中，text是<option>元素的文本内容。
以上方法可以实现在<select>中以编程方式选择<option>。
相关·内容
我有一份选择名单。我正在使用jQuery更新所选项目。当我更改选定的值时，框中显示的项不会更新。在下面的示例中，选项"a“设置为所选。然后使用jQuery将选定的项更改为"d“。它仍然显示"a“。但是，如果展开列表，则可以看到"d“被选中或突出显示。不知道如何解决这个问题。任何帮助都将不胜感激！
Html：
<select id="t">
<option>select one</option>
<option id="a" selected="selected"&
浏览 2提问于2013-12-20得票数 0
回答已采纳
2回答
当以编程方式将选项附加到Select2元素时，为什么不识别表单呢？
Html
Jquery Select2
$('#subrecursos').select2({
width: null,
multiple: true,
allowClear: true,
tags: true,
"language": {
"noResults": function () {
浏览 7提问于2017-01-08得票数 0
回答已采纳
1回答
我正在编写下面的代码。当我以编程方式更改选择时，如何对动态添加的selection进行更改以引起注意？
$(document).ready(function() {
setTimeout(function() {
$("div").append('<select id="color"><option value="khaki">Khaki</option> <option value="green">Green</option> <optio
浏览 0提问于2019-05-09得票数 0
回答已采纳
编辑A: --这不是一个jquery问题，而是一个jquery 问题。
编辑B:我更改了标题..。最初，我问过如何具体地触发“单击”事件，但是如果您想重新创建jqm:Select菜单选项，那么“单击”事件显然不是要使用的适当事件。
如何在jquery移动选择菜单上以编程方式触发事件？
<select id = 'my_select'
name = 'my_select'
onchange = 'gf_handle_change( this.value );' >
&l
浏览 6提问于2013-02-08得票数 1
回答已采纳
2回答
我尝试从表单中选择一个特定的select输入，在其中我使用select2库。写道：
若要以编程方式为Select2控件选择选项/项，请使用jQuery .val()方法：
$('#mySelect2').val('1'); // Select the option with a value of '1'
因此，我尝试用值0设置输入。但是，输入没有更改。。我错过了什么？
$('.js-example-basic-single').select2({
allowClear: true
});
var myFlag =
浏览 0提问于2018-10-09得票数 2
回答已采纳
我正在尝试使用javascript以编程方式填充html选择框。我发现，尽管我的代码可以正常工作，但jquery mobile正在干扰选择框中显示的内容。我正在设置选定的选项，该选项正在工作，但选择框中显示的值是错误的值。它与我最初从html填充的内容没有什么不同。
我正在链接："“。有什么办法可以绕过jquery吗？我不能简单地删除jquery css。这会破坏我网站上的一切，而且我没有时间重新做所有的事情。
下面是这个问题的一个jsfiddle：
下面是我的代码供参考：
下面是我的javascript函数，它填充了选择框：
function printCartList(newCar
浏览 3提问于2013-11-18得票数 0
我正在使用Materializecss框架在html中做一个表单，我在我的表单中有varios选择多个。我想在我的selects中获得下一个结果：
首先，选中选项"None“，因为该选项具有属性"Selected”。我希望当我选择像黄色、蓝色或红色这样的选项时，选项“无”会自动被“取消勾选”。下图中的示例：
如果我再次单击“无”，则必须取消选中其他选项。我想用JQuery实现这一点，但是我已经尝试了很多方法，但是我没有得到我想要的结果。你们能帮帮我吗？我在一个项目中工作，这一部分非常重要。
我尝试过使用prop()和Attr()等函数，删除了属性"Selected&#
浏览 17提问于2017-12-02得票数 0
1回答
编辑：，我已经弄清楚了这个问题的症结所在。
解决方案:对于这个perticular问题，我有权限问题的。由于我直接将选定的和select2项目文件夹复制到我的应用程序中，显然权限是不正确的。解决方案要么是在开发过程中在项目中创建插件文件，要么在终端中执行'chmod 0755 -R select2 2/‘，因为您使用的是*nix机器。就是这样。这不是被选中的与select2之间的任何冲突问题或类似的问题。
原始帖子：
我正在尝试使用Select2创建一个干净的多值选择框。我尝试过Select2和Chosen.js，结果是一样的。盒子显示不正确。它显示了一个老式的、丑陋的多个选择框，就像
浏览 2提问于2012-11-17得票数 1
有一个动态生成的html，其中有一个select元素。我们可以在里面选择一个选项，而且效果很好。
就像：
<div id="test">
<select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</div>
然后尝试使用：
var htmlstr= jQuery(
浏览 4提问于2014-05-14得票数 2
回答已采纳
6回答
我选择了以下html结构
<select id="mainMenu" data-mini="true" name="select-choice-min">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4
浏览 11提问于2014-08-24得票数 4
回答已采纳
在返回两个函数的值并将它们相加时，我遇到了问题。我需要将fruitNum添加到carNum中
HTML
<select class="fruit" >
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Pineapple</option>
<option value="4">Banana
浏览 3提问于2014-02-18得票数 0
回答已采纳
4回答
我已经尝试做这个jquery，选定的项目将显示在文本字段中，但它不工作，如果它是在div中使用，而不是使用div的输入文本，但它不能在以下代码中作为文本字段工作
<html>
<head>
<style>
div {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select nam
浏览 0提问于2015-01-25得票数 0
我正在使用jquery mobile 1.1CSS，并希望构建一个具有multiple="multiple“属性的选择框。我还尝试了很多方法来改变带有multiple="multiple“属性的选择框。但是转换失败了，即使我写了下面这样的选择框，它也会一如既往地给出下拉框，所以请建议我如何使用这个属性的选择框。
<select class="styled" name="purpose-" id="someID" onchange = "go()" multiple="multiple">
浏览 1提问于2012-09-27得票数 0
我已经在I浏览器上挣扎了几个小时了，似乎找不到我的问题所在。我正在尝试用jQuery show()和hide()实现一个简单的“组选项切换器”。
你最好看看我的演示，明白我的意思：
我的代码可以在除IE之外的所有浏览器中运行。我的代码是这样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style
浏览 3提问于2012-12-22得票数 1
回答已采纳
我们看到，下面这两个示例都实现了.change(funct(//does ))之后的额外.change(‘change’)。对于jsfiddle中的第一个示例，我去掉了change()，它仍然有效。我不明白为什么他们最终会手动触发改变？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
浏览 1提问于2014-09-02得票数 0
回答已采纳
我一直在尝试使用SelectBoxIt Jquery插件，但是在动态创建的选择框的display和disabled属性上遇到了问题。简而言之，如果原始选择框有一个"display:none“css属性，SelectBoxIt仍然会显示它。我通过在隐藏的容器div中插入选择框绕过了这个问题。然而，当容器div被显示时，selectboxit被正确显示，但现在被禁用。你们有什么办法解决这个问题吗？
HTML代码：
<div>
<select name="sel" id="sel">
<option value="0
浏览 0提问于2013-03-10得票数 0
2回答
我使用以下jquery代码在表中添加和删除行。我在一页上有多个表。每个表中的每一行都有这两个类：.row-add和.row-delete
现在，当我单击“.row- add”添加新行时，所有的表都会受到影响，这意味着该行会添加到同一页上的所有表中。我应该怎么做才能使它在单击时只应用于它自己的表？
Jquery：
$(document).ready(function () {
$('.row-delete').click(function () {
$(this).closest("tr").remove();
});
$(&
浏览 2提问于2012-09-07得票数 0
我有一个页面上显示3个下拉选择器的页面。我还有一个jQuery代码，用于检查以确保如果选择了一个选项，则不允许在其他两个下拉列表中选择相同的选项。
我需要改变代码，不只是停止允许选择一个副本，而是从下面的其他下拉列表中完全删除所选的选项。我假设我必须将所有选项放入一个数组中，并在生成下一个下拉列表时以某种方式从列表中删除。
或者，我需要用一种不同的颜色来标记已经选择的那些，也许是用一个类。
下面是我当前的代码：
$('.mySelect').change(function(index, elem){
var myFilter = $(this).val();
i
浏览 0提问于2011-02-16得票数 0
回答已采纳
4回答
我有我的HTML代码和像这样的JavaScript代码(我在使用jQuery)
HTML：
<input type="checkbox" name="type" value="program" id="box-1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
&l
浏览 0提问于2016-01-23得票数 2
回答已采纳
3回答
我想在单击图像时打开一个下拉列表，并显示一条警告消息，指出正在单击哪个下拉列表选项。
我的html代码是：
<div class="account_notification">
<a href="#">
<div class="notify_notification">click</div><!-- notify_notification close --></a>
</div><!-- account_notification close -->
&
浏览 0提问于2014-04-06得票数 0
我正在学习jQuery的过程中，我觉得我一定是错过了一些东西。我有一个非常简单的表单，如下所示：
<form name="testform" id="testform" method="post">
<select type="select" id="searchid">
<option value="1">Option 1</option>
<option value="2">Opt
浏览 4提问于2014-06-02得票数 0
我正在使用jQuery以编程方式更新选定的选项，但浏览器中没有任何变化。(即，旧的选定选项保持选定状态，而不是切换到新选定的选项。)有什么建议吗？
谢谢。--杰夫
我有一个像这样的简单表单：
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selec
浏览 0提问于2012-06-07得票数 6
回答已采纳
我使用循环将大约10个选择框添加到表单中。都有相同数量的选项。
<?php
for($i=1; $i<11; $i++){
?>
<select name="doc[]"; id="doc<?php echo $i?>"; autocomplete="off";
onchange='disable()' required>
<option value="none&#
浏览 4提问于2022-09-23得票数 0
回答已采纳
我真的花了很大力气在这里和谷歌上寻找可能的答案。我确实找到了一些答案，但当我将它们应用于我的代码和我的情况时，它就是不起作用。
我试过了：
$("select#city option['City, ST']").attr('selected', 'selected');
我也试过了：
$("select#city").val('City, ST');
就像在某处建议的那样。
我试着把这段代码放到一个document.ready函数中--但没有用。然后我试着把它放在顶部(不是在头部)，没有docume
浏览 6提问于2012-10-05得票数 0
回答已采纳
我试图通过文本在select中找到一个选项，并将该选项移到select的顶部，但是我似乎无法得到它，使用版本1.9.1。
// move 'untagged' option to top of select
jQuery('#logical_interface_vlan_id option:[text="Untagged"]').prependTo(jQuery('#logical_interface_vlan_id'));
logical_interface_vlan_id是select的id，Untagged是我正在寻找的选项
浏览 6提问于2013-08-16得票数 0
回答已采纳
1回答
我使用的JQuery select2如下所示
<select style="width:150px" id="lang" multiple >
<option value="1">1</option>
<option value="2">2</option>
<option value="11">3</option>
</select>
Javascript
$(document).rea
浏览 7提问于2016-10-27得票数 0
回答已采纳
2回答
我想将无序列表保存到数据库中的列中。我该怎么做？
棋子
火腿
创建表INGREDIENTE (名称varchar(20)，成分varchar(30)；
我想把这份清单放在配料部分。
下面是我用来创建列表的html和js中的代码。
function selectIngredient(select)
{
var $ul = $(select).closest('.ui-select').prev('ul');
console.log($ul[0])
if ($ul.find('input[value='
浏览 5提问于2012-12-02得票数 0
4回答
我使用的是jquery 1.3.2。
这是我的代码：
var additionsPricesItems = debitPrice.find('table[name|=Addition_]');
debitPrice包含以下结构：
<DIV name="DebitPrice"><SELECT name=CustomerSelect><OPTION value=5264>5113575921</OPTION></SELECT><BR><A jQuery1304508596343="
浏览 0提问于2011-05-04得票数 1
回答已采纳
3回答
它应该在工作，但不幸的是，它不是。我不知道我的代码有什么问题。当我尝试弹琴时，它是有效的，但在我的Notepad++中它不起作用。我不知道这是怎么回事。
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script sr
浏览 1提问于2016-04-16得票数 1
回答已采纳
1回答
我正在构建一个现有的woocommerce wordpress扩展，我正在将产品变体(大小，颜色等)下拉菜单转换为单选框。关键之处在于，当用户从下拉列表中选择一个选项时，它会触发通过ajax自动更新产品库存和价格的操作。
我使用它将输入转换为无线电(来自)：
$('.variations select').each(function(i, select){
var $select = jQuery(select);
$select.find('option').each(function(j, option){
var $opti
浏览 0提问于2012-08-06得票数 2
回答已采纳
1回答
如何以编程方式在物化css中从select中选择一个选项？我尝试用它的第一个选项追加select的值。
任何帮助都将不胜感激。
谢谢。
$('select').material_select();
$('#select_1').val($('#select_1 option:first').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link
浏览 1提问于2018-05-08得票数 2
回答已采纳
我有一个选择列表和4个选项。当我使用value="zero"选择第一个选项时，我想要隐藏提交按钮。当我选择其他选项“一”、“二”、“三”时.我希望显示提交按钮。这是我第一次开始编程，我不知道该怎么做。请帮帮忙..。谢谢！
$('.wizardActionStaRate').change(function() {
var firstItem = $('select [value="zero"]')
if ($(firstItem)) {
$('.starate').hide();
} el
浏览 1提问于2018-05-02得票数 1
回答已采纳
下面是正确填充select列表的内容：
<select id="countriesList">
<option value="0"> -- select country -- </option>
<option value="500"> 500 </option>
</select>
<script type="text/ja
浏览 0提问于2011-01-28得票数 0
回答已采纳
我读过一些关于如何使用jQuery在HTML select元素中选择第一个选项的文章，但我似乎无法在jQuery移动页面上使用它。
选择元素：
<select id="myList">
<option value="" selected>Select a List</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
浏览 9提问于2014-11-17得票数 4
回答已采纳
我有一个以编程方式添加的选择框数组。他们的名字是“数组化”(见下文)。
<select name="blah[]">
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="blah[]">
<option value="A">A</option>
<option
浏览 4提问于2011-07-22得票数 1
回答已采纳
是否有任何解决方案可以在$(this)选项选择中使用javaScript代替和ID？
var tot = 5 * ($( "#firstOne option:selected" ).text());
在上面的示例中，我希望使用$(this)而不是#firstOne，以便能够使用此函数进行多选项选择。
更新
$(document).ready(function() {
document.getElementById("totalPrice").innerHTML = 0 + " €";
});
function a
浏览 0提问于2016-05-05得票数 1
回答已采纳
2回答
我试图使用javascirpt (jquery)填充html选择，但没有成功。
我知道如何用jquery填充select (通过使用‘append’方法)。
我不能做的是，我必须从以下格式的字符串中读取select的值："AA、B、CCC、DD、E"；因此，各种值都由逗号分隔。
其结果必须如下：
<select id="select">
<option value="AA">AA</option>
<option value="B">B</option>
浏览 3提问于2013-03-15得票数 0
回答已采纳
我的应用程序由4个角色组成，它们将出现在下拉菜单中。如果我点击一个特定的角色，它将导航到我提到的href链接。我的问题是在导航到第二个html页面后，下拉列表中的角色没有被修复。它一直只显示第一个值。我的第一个html：
<select name="loginuser" id="loginuser">
<option value="dash.html">first</option>
<option value="dash1.html">secon
浏览 17提问于2018-07-25得票数 0
回答已采纳
<select class="FunctieSelect">
<option class="yellow" value="-1">- kies -</option>
<option class="yellow" value="1">KSZ functie</option>
<option class="yellow" value="2">Bakker</option>
<option class
浏览 5提问于2009-03-17得票数 1
回答已采纳
使用jQuery将.html() of a <option>在<select> (之前我已将selectedIndex属性设置为-1)中将<select>的selectedIndex属性从“-1”重置为“0”
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<ti
浏览 4提问于2015-01-29得票数 12
回答已采纳
我在Django表单中遇到了一个问题，它拒绝更改发送views.py类的隐藏输入的值。模板configuration.html包含一个选择多个参数的表单。此外，我需要使用前面名为list_items的变量创建一个新变量，该变量根据选择的参数更改其值，为了发送它，我使用了一个隐藏的输入标记：
<input id="combo" name="combinaison" class="btn btn-success col-lg-12" type="hidden" value="test">
变量被发送到vie
浏览 8提问于2019-08-20得票数 2
5回答
我是HTML语言的新手，我正在尝试使用phoneGap和jQuery插件构建一个移动应用程序。我目前正在使用eclipse编程，在我的应用程序中，我有一个下拉菜单(select)，里面有几个项目。我正在尝试更改选择项的宽度，但它不起作用。在这里，您可以看到我为解决此问题所做的工作：
<label for="select-choice-1" class="select">Choose Expiry Date</label>
<select id="date" name="select-choic
浏览 0提问于2011-07-27得票数 4
回答已采纳
在我的项目中，我有点迷失了方向。我在一家提供翻译服务的公司工作。嗯，我正在做一个简单的计算器，根据整个项目中的字数来计算翻译的成本。它还会根据输入的单词数量改变速率。我已经完成了那部分。我写了这段代码，它是有效的：
function wordcountprice(){
var price, final,
a=document.getElementById('words'),
wc= parseFloat(a.value) || 0;
if(wc< 10000) price= .29;
else price= wc<20000? .26: .24;
浏览 4提问于2011-03-10得票数 0
回答已采纳
2回答
在我的WordPress站点上，当下拉菜单中的选项被选中时，我正在使用jQuery更新H2标头中的文本。 下面的代码在这里运行得很好，但我不能让它在我的live站点上运行。 以下是我正在使用的工作代码： jQuery(document).ready(function() {
jQuery("#wpfs-plan--NjUyMTB").change(function() {
var selectedValue = this.value;
if (selectedValue == 'SEO_500_word_articles') {
浏览 21提问于2020-03-23得票数 0
回答已采纳
1回答
下面是一个<select>元素：
<select>
<option>Hello</option>
<option>Banana</option>
<option>Balloon</option>
<option>Something</option>
<option>Potato</option>
<option>Cleveland</option>
</select>
浏览 0提问于2011-08-24得票数 3
在html页面中，我们有两个下拉列表，当我们从第一个jquery工作中选择一些东西，并为下一个下拉列表显示更多选项时，这是一个html代码：
<select name="cat_level1" id="cat_level1" size="1" class="form-control input-inline">
<option value="0">1</option>
<option v
浏览 0提问于2017-01-31得票数 1
回答已采纳
3回答
所以很明显，你有以下几点
<select>
<option value="0">One</option>
<option value="1">Two</option>
</select>
$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
但是如果你有
&l
浏览 0提问于2012-03-29得票数 0
回答已采纳
尝试访问纯javascript中的每一行的最后一列，不是jquery，但不是working.Anyone，请帮助查找解决方案。
app.component.html：
<div id="contentId">
<table>
<thead>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</thead>
<tr>
<td>Alfreds
浏览 4提问于2020-02-11得票数 0
回答已采纳
我在另一个主题()中找到了一个有用的jquery代码，可以根据下拉选择显示文本。
但是，我的ID有空格，而代码与此不兼容。我无法完全访问shopify代码/后端以消除空格(进一步澄清: shopify将只使用下拉文本的名称作为值，因此使用空格)
有人能帮我修复下面的代码吗？
非常感谢！
$('p').hide();
$('#14 Days').show();
$('select').change(function() {
$('p').hide();
var a = $(this).val();
$("#
浏览 0提问于2019-04-23得票数 0
在尝试验证表单时，如何忽略隐藏的div中的jquery-select2元素？
<form id="form">
<div id="hidden" style="display:none">
<select id="select2">
<option>1</option>
<option>2</option>
</select>
</div>
</f
浏览 0提问于2016-09-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
