jquery怎么根据value来动态选中select下的option

1、新建一个HTML文件，命名为indexhtml。

2、在indexhtml文件中编写select选择框html代码，实现选项的效果。

3、在页面中加载jquery-132minjs文件，编写Jquery代码获得所有选项的option值。通过each（）方法遍历所有的option值，并存入select_con数组中。

4、使用consolelog()打印数组，运行代码查看数组内容。

5、可以看到数组已成功获得select 中option所有的值。

6、通过map()方法获得所的option值，把结果返回到result变量中。

7、通过get()方法把获得的对象转换为数组，并存入select_con数组中。

这个必须要在改变之前获取并保存，可以用变量保存起来，也可以直接附加在这个select标签上，如：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<select id="mysel">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>

<script type="text/javascript">

var mysel = $("#mysel");

myseldata("last", myselval())change(function () {

//var mysel = $(this);

var oldvalue = myseldata("last");//这次改变之前的值

myseldata("last", myselval()); //每次改变都附加上去，以便下次变化时获取

var newvalue = myselval(); //当前选中值

})

</script>

方法步骤如下：

1、首先打开计算机，然后打开前端编辑软件，新建一个html文件。

2、在html代码页面新建标签，再在界面内输入如下代码：<input type="button" value="清空" onclick="clearSelect();"/>  <div id="test">   <select name="">    <option value="0">请选择下拉菜单</option>    <option value="1">选择1</option>    <option value="2">选择2</option>    <option value="3">选择3</option>   </select>  </div>。

3、然后再在界面内添加点击事件并输入如下代码： <script>   function clearSelect(){    $("#test select")each(function(){     $(this)find("option")eq(0)prop("selected",true)    })   }  </script>。

4、保存html文件后使用浏览器打开，会出现选择select下拉菜单。

5、然后选择第二个选项即可。

基本思路：遍历select下的option，使用val()获取每个option的值，然后加入到一个数组中。根据这个思路，可以使用for循环或者jQuery的each()遍历函数实现。这里提供一个更简洁的代码：

$("option")map(function(){return $(this)val();})get()join(", ")

代码说明：

使用map()函数把每个option的值传递到当前匹配集合，生成包含返回值的对象；

使用 get() 处理返回的对象以得到基础的数组；

使用join()函数组装字符串。

实例演示如下:

1、HTML结构

<select id="test">

<option value="option-1">option-1</option>

<option value="option-2">option-2</option>

<option value="option-3">option-3</option>

</select><br>

<input type="button" value="获取所有option值">

2、jquery代码

$(function(){

$(":button")click(function() {

var str = $("#test option")map(function(){return $(this)val();})get()join(", ")

alert(str);

});

});

3、效果演示

获取选中的值

获取一组radio被选中项的值

var item = $(“input[@name=items]：checked”)val();

获取select被选中项的文本

var item = $("select[@name=items] option[@selected]")text();

select下拉框的第二个元素为当前选中值

$('#select_id')[0]selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$('input[@name=items]')get(1)checked = true;

获取值：

文本框，文本区域：

$("#txt")attr("value")；

$("#txt")val();

多选框checkbox：

$("#checkbox_id")attr("value")；

单选组radio：

$("input[@type=radio][@checked]")val();

下拉框select：

$('#sel')val();

控制表单元素：

文本框，文本区域：

$("#txt")attr("value",'');//清空内容

$("#txt")attr("value",'11');//填充内容

多选框checkbox：

$("#chk1")attr("checked",'');//不打勾

$("#chk2")attr("checked",true);//打勾

if($("#chk1")attr('checked')==undefined) //判断是否已经打勾

单选组radio：

$("input[@type=radio]")attr("checked",'2');

//设置value=2的项目为当前选中项

下拉框select：

$("#sel")attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>")

appendTo("#sel")//添加下拉框的option

$("#sel")empty()；//清空下拉框

在Jquery中,用$("#id")来获得页面的input元素,其相当于documentgetElementById("element")但是,该获取的是一个Jquery对象,而不是一个dom element对象value是dom element对象的属性所以,使用$("#id")value不能取到值取值的方法如下:

取值：

val = $("#id")[0]value;

$("#id")[0]value = "new value";

赋值：

$("#id")[0]value = "new value";

或者$("#id")val("new value");

val = $("#id")attr("value");

分别使用javascript原生的方法和jquery方法

<select id="test" name="">

<option value="1">text1</option>

<option value="2">text2</option>

</select>

code:

一：javascript原生的方法

1:拿到select对象： var myselect=documentgetElementById("test");

2：拿到选中项的索引：var index=myselectselectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselectoptions[index]value;

4:拿到选中项options的text： myselectoptions[index]text;

二：jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected"); //获取选中的项

2:alert(optionsval()); //拿到选中项的值

3:alert(optionstext()); //拿到选中项的文本

以上就是关于jquery怎么根据value来动态选中select下的option全部的内容，包括:jquery怎么根据value来动态选中select下的option、jq 怎么改变select的值、如何用jquery选中select的第二个option等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！