jQuery的设置选择指数(jQuery Set Select Index)

2019-06-18 11:18发布

站内文章 / 前端开发

16 0

女 | 书童

私信

我有一个选择框：

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

我想设置的选项为“选择”的基础上它的选择指标之一。

例如，如果我想设置“3号”，我想这一点：

$('#selectBox')[3].attr('selected', 'selected');

但是，这是行不通的。我怎样才能设置一个选项为选中此基础上的指数使用jQuery？

谢谢！

Answer 1:

注：答案取决于jQuery的1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

感谢您的评论， .get是行不通的，因为它返回一个DOM元素，而不是一个jQuery的一个。请记住.eq功能，可以选择外使用，以及如果你喜欢。

$('#selectBox option').eq(3).prop('selected', true);

如果你想使用的，而不是依赖于选择特定的索引 值，您还可以更简洁/可读性：

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

注： .val(3)的作品，以及在这个例子中，但非数字值必须是字符串，所以我选择了一致的字符串。
（例如<option value="hello">Number3</option>要求使用.val("hello")

Answer 2:

这也可能是有用的，所以我想我会在这里添加它。

如果您想选择基于项目的价值和值项目不索引，那么你可以做到以下几点：

您的选择列表：

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

jQuery的：

~~$('#selectBox option[value=C]').attr('selected', 'selected');~~

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

所选的项目将是“2号”了。

Answer 3:

试试这个：

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

同样，看看这可以帮助你：

http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/

Answer 4:

更简单：

$('#selectBox option')[3].selected = true;

Answer 5:

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

当你想用一组选择顶部的方式来选择，你可以使用
$('#select option').removeAttr('selected'); 对于删除以前的选择。

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

Answer 6:

什么是重要的一点是， val()为select元素返回所选选项的值，而不是元素的数量一样selectedIndex在JavaScript。

要选择带有选项value="7"你可以简单的使用方法：

$('#selectBox').val(7); //this will select the option with value 7.

要取消选择该选项使用一个空数组：

$('#selectBox').val([]); //this is the best way to deselect the options

当然，你可以选择多个选项*：

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

*但是选择多个选项，你<select>元素必须具有MULTIPLE属性，否则将无法正常工作。

Answer 7:

我一直用（“选择”），下面一直为我工作道具的问题：

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

Answer 8:

试试这个：

$('select#mySelect').prop('selectedIndex', optionIndex);

最终，触发.change事件：

$('select#mySelect').prop('selectedIndex', optionIndex).change();

Answer 9:

希望这能帮助太

$('#selectBox option[value="3"]').attr('selected', true);

Answer 10:

注意：

$('#selectBox option')[3].attr('selected', 'selected')

不正确，数组的尊重让你的DOM对象，而不是一个jQuery对象，所以它会与一个TypeError失败，例如在FF着：“$（‘＃选择框选项’）[3] .attr（）不是一个函数“。

Answer 11:

为了澄清马克的约翰Kugelman的回答，您可以使用：

$('#selectBox option').eq(3).attr('selected', 'selected')

get()如果指定，因为它得到的DOM对象，而不是一个jQuery对象，所以下面的解决方案将无法工作方式使用将无法正常工作：

$('#selectBox option').get(3).attr('selected', 'selected')

eq()得到的过滤器jQuery的设置为与指定的索引的元素的。这是再清楚不过了$($('#selectBox option').get(3)) 这还不是所有的高效率。 $($('#selectBox option')[3])是更有效的（见测试例）。

你实际上并不需要jQuery对象，虽然。这将这样的伎俩：

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

另外一个非常重要的点：

“选择”属性是不是你指定一个选中的单选按钮（在Firefox和Chrome至少）。使用“选中”属性：

$('#selectBox option')[3].checked = true;

这同样适用于的复选框。

Answer 12:

在1.4.4你得到一个错误：$（“＃选择框选项”）[3] .attr不是一个函数

这工作： $('#name option:eq(idx)').attr('selected', true);

凡#name是选择ID和idx是你想要选择的选项值。

Answer 13:

在纯JavaScript 的selectedIndex属性去，因为，它的纯JavaScript和工作的跨浏览器的正确方法：

$('#selectBox')[0].selectedIndex=4;

这里是一个演示的jsfiddle使用一个设置其他两个下拉菜单：

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

你也可以改变的selectedIndex如果你想要的是在选择标签（以下简称“中选择”属性之前调用此这里是小提琴）：

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

Answer 14:

选择第三个选项

$('#selectBox').val($('#selectBox option').eq(2).val());

实施例上的jsfiddle

Answer 15:

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Answer 16:

$('#selectBox option').get(3).attr('selected', 'selected')

当使用上述我老是感到WebKit的（铬）说错误：

“遗漏的类型错误：对象＃有没有方法‘ATTR’”

这句法停止这些错误。

$($('#selectBox  option').get(3)).attr('selected', 'selected');

Answer 17:

通过简单地做这个选择基于在选择列表中（特别是如果选项值有一个空格或奇怪的字符）的值项：

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

另外，如果你有一个下拉菜单（而不是多选），你可能想要做一个break; 这样你就不会得到的第一个价值发现的被覆盖。

Answer 18:

我需要一个没有硬编码在js文件值的溶液; 使用selectedIndex 。大多数给出的解决方案的失败一个浏览器。这似乎在FF10和IE8工作（可以在其他版本的别人测试）

$("#selectBox").get(0).selectedIndex = 1;

Answer 19:

如果你只是想选择基于随后的项目类型的jQuery选择的特定属性的项目[道具= VAL]将获得该项目。现在我不关心我只是它的价值要的项目索引。

$('#mySelect options[value=3]).attr('selected', 'selected');

Answer 20:

我面临着同样的问题。首先，你需要经历的事件（即该事件发生的第一次）。

例如：

第一个事件是生成的选项选择框。

第二事件是选择使用任何功能，诸如Val（）等默认选项

您应该确保第二次事件应在第一个事件之后发生。

为了实现这一目标需要两种功能可以说generateSelectbox（）（用于genrating选择框）和selectDefaultOption（）

你需要确保selectDefaultOption（）只generateSelectbox执行后应称为（）

Answer 21:

您还可以初始化多个值，如果你的选择框是一个含多处：

$('#selectBox').val(['A', 'B', 'C']);

Answer 22:

我经常使用触发器（“变化”），使其工作

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

ID为例如选择= selectA1和position_index = 0（在所选择的选项弗里斯特）：

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

Answer 23:

你可以设置selectoption变量值动态以及选项将selected.You可以试试下面的代码

码：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

HTML代码：

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

Answer 24:

不久：

$("#selectBox").attr("selectedIndex",index)

其中指数是所选择的索引作为整数。

文章来源: jQuery Set Select Index

标签： jquery jquery-selectors

贪生不怕死