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

Posted 2023-02-22

【中文标题】检查是不是使用 jQuery 选择了选项，如果没有选择默认值

【英文标题】：Check if option is selected with jQuery, if not select a default检查是否使用 jQuery 选择了选项，如果没有选择默认值

【发布时间】：2010-09-14 01:20:30

【问题描述】：

使用 jQuery，如何检查选择菜单中是否有一个选项被选中，如果没有，将其中一个选项指定为选中。

（选择是在我刚刚继承的应用程序中使用迷宫般的 php 函数生成的，所以这是一个快速修复，当我了解这些时:)

【问题讨论】：

api.jquery.com/selected-selector

【参考方案1】：

如果您需要显式检查每个选项以查看是否有任何具有“选定”属性的选项，您可以这样做。否则使用option:selected，您将获得第一个默认选项的值。

var viewport_selected = false;      
$('#viewport option').each(function() 
    if ($(this).attr("selected") == "selected") 
        viewport_selected = true;
    
);

【参考方案2】：

我找到了一个很好的方法来检查是否选择了选项并在未选择时选择默认值。

    if(!$('#some_select option[selected="selected"]').val()) 
        //here code if it HAS NOT selected value
        //for exaple adding the first value as "placeholder"
        $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>');
    

如果 #some_select 没有默认选择选项，则 .val() 为 未定义

【参考方案3】：

虽然我不确定你想要完成什么，但这段代码对我有用。

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

【讨论】：

这样的选择会更容易阅读：$("#mySelect").val(3);

这让我走上了正轨，但我需要这样做：$("#mySelect option")[2]['selected'] = true; 在调查了 Firebug 中的对象结构后发现了这一点。

从 jQuery 1.6 开始，您可以直接设置属性。 $("#mySelect").prop("selectedIndex", 2)

.val(x) 版本在 Internet Explorer 8 中不起作用，所以@gradbot 是正确的，因为它适用于所有浏览器。

【参考方案4】：

我只是在寻找类似的东西，发现了这个：

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true);

这会查找类中尚未选择选项的所有选择菜单，并选择默认选项（在本例中为“2”）。

我尝试使用:selected 而不是[selected]，但这不起作用，因为总是选择某些内容，即使没有任何属性具有该属性

【参考方案5】：

选择框上的更改事件要触发，一旦触发，只需拉取所选选项的 id 属性：-

$("#type").change(function()
  var id = $(this).find("option:selected").attr("id");

  switch (id)
    case "trade_buy_max":
      // do something here
      break;
  
);

【参考方案6】：

这个问题很老了，有很多观点，所以我只是把一些东西扔在那里，我肯定会帮助一些人。

检查一个选择元素是否有任何选定的项目：

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 有许多不同的方式来完成同样的事情，所以您通常只需选择看起来最有效的一种。

【讨论】：

"not" 对我不起作用 $('#mySelect option').each(function() if ($(this).not(':selected')) .. );所以使用否定就像 if (!$(this).is(':selected')) .. Browser: Chrome; jQuery 版本：3.1.1

【参考方案7】：

if (!$("#select").find("option:selected").length)
  //

【参考方案8】：

$("#select_box_id").children()[1].selected

这是在 jquery 中检查选项是否被选中的另一种方法。这将返回布尔值（True 或 False）。

[1] 是选择框选项的索引

【参考方案9】：

我已经遇到过提到的texotela plugin，这让我可以这样解决：

$(document).ready(function()
    if ( $("#context").selectedValues() == false) 
    $("#context").selectOptions("71");
    
);

【参考方案10】：

这是一个我发现有效的快速脚本... .Result 被分配给一个标签。

$(".Result").html($("option:selected").text());

【参考方案11】：

$("option[value*='2']").attr('selected', 'selected');
// 2 for example, add * for every option

【参考方案12】：

<script type="text/javascript"> 
$(document).ready(function() 
  if (!$("#mySelect option:selected").length)
   $("#mySelect").val( 3 );

);
</script>

【参考方案13】：

lencioni's answer 是我推荐的。您可以更改选项('#mySelect option:last') 的选择器以使用“#mySelect option[value='yourDefaultValue']”选择具有特定值的选项。 More on selectors.

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

【参考方案14】：

简单！默认应该是第一个选项。 完成！这会让您使用不显眼的 JavaScript，因为不需要 JavaScript :)

Unobtrusive JavaScript

【参考方案15】：

你们在选择方面做得太多了。只需按值选择：

$("#mySelect").val( 3 );

【讨论】：

这是选择选项 3，无论是否已经选择了另一个选项。

【参考方案16】：

这是我更改所选选项的功能。它适用于 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');   

【参考方案17】：

不需要为此使用jQuery：

var foo = document.getElementById('yourSelect');
if (foo)

   if (foo.selectedIndex != null)
   
       foo.selectedIndex = 0;
    

【讨论】：

OP 声明“使用 jQuery ...”所以忽略它似乎是多余的，不是吗？

就个人而言，如果我问一个特定的问题，我希望得到问题的答案，而不是用不同的方式。

有时你寻求的答案不是你所期望的。

不管怎样，他要求使用 jQuery，而 jQuery 的答案更容易理解，尤其是如果你不懂基本的 JavaScript。

很好的方法，有时基本的javascript可以很方便！

【参考方案18】：

查看select 元素的selectedIndex。顺便说一句，这是一个普通的 DOM 事情，不是 JQuery 特定的。