检查是否使用 jQuery 选择了选项,如果没有选择默认值

IT技术 javascript jquery forms dom html-select
2021-02-04 22:55:49

使用 jQuery,您如何检查选择菜单中是否选择了某个选项,如果没有,将其中一个选项指定为已选择。

(选择是在我刚刚继承的应用程序中使用迷宫般的 PHP 函数生成的,因此这是一个快速修复,同时我也了解了这些 :)

6个回答

虽然我不确定您到底想要完成什么,但这段代码对我有用。

<select id="mySelect" multiple="multiple">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length) {
    $("#mySelect option[value='3']").attr('selected', 'selected');
  }
});
</script>
从 jQuery 1.6 开始,您可以直接设置属性。 $("#mySelect").prop("selectedIndex", 2)
2021-03-22 22:55:49
.val(x) 版本在 Internet Explorer 8 中不起作用,所以 @gradbot 是正确的,因为它适用于所有浏览器。
2021-03-29 22:55:49
这让我走上了正确的轨道,但我需要这样做: $("#mySelect option")[2]['selected'] = true; 在调查 Firebug 中的对象结构后弄清楚了。
2021-04-01 22:55:49
选择会更容易阅读,如下所示: $("#mySelect").val(3);
2021-04-04 22:55:49

无需为此使用 jQuery:

var foo = document.getElementById('yourSelect');
if (foo)
{
   if (foo.selectedIndex != null)
   {
       foo.selectedIndex = 0;
   } 
}
无论如何,他要求使用 jQuery,而 jQuery 的答案更容易理解,尤其是在不了解基本 JavaScript 的情况下。
2021-03-17 22:55:49
OP 说,“使用 jQuery ......”所以忽略它似乎是多余的,不是吗?
2021-03-19 22:55:49
有时,您寻求的答案并非您所期望的。
2021-03-22 22:55:49
就我个人而言,如果我问一个特定的问题,我希望得到这个问题的答案,而不是另一种方式。
2021-03-27 22:55:49
这样做的好方法,有时基础 javascript 可能非常方便!
2021-04-01 22:55:49

这个问题很老,有很多观点,所以我会抛出一些东西,我敢肯定会帮助一些人。

要检查选择元素是否有任何选定的项目:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); }

或检查选择是否未选择任何内容:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); }

或者如果您处于某种循环中并且想要检查当前元素是否被选中:

$('#mySelect option').each(function() {
    if ($(this).is(':selected')) { .. }
});

检查在循环中是否未选择元素:

$('#mySelect option').each(function() {
    if ($(this).not(':selected')) { .. }
});

这些是执行此操作的一些方法。jQuery 有许多不同的方法来完成同样的事情,所以你通常只需要选择一种看起来最有效的方法。

“不”对我不起作用 $('#mySelect option').each(function() { if ($(this).not(':selected')) { .. } }); 所以使用否定就像 if (!$(this).is(':selected')) { .. } Browser: Chrome; jQuery 版本:3.1.1
2021-04-04 22:55:49

lencioni 的回答是我推荐的。您可以更改选项的选择器以('#mySelect option:last')使用“ #mySelect option[value='yourDefaultValue']选择具有特定值的选项更多关于选择器

如果您在客户端上广泛使用选择列表,请查看此插件:http : //www.texotela.co.uk/code/jquery/select/如果您想查看更多使用选择列表的示例,请查看源代码。

这是我更改所选选项的功能。它适用于 jQuery 1.3.2

function selectOption(select_id, option_val) {
    $('#'+select_id+' option:selected').removeAttr('selected');
    $('#'+select_id+' option[value='+option_val+']').attr('selected','selected');   
}