jQuery取得select选择的文本与值的示例

前端技术 2023/09/06 JavaScript
获取select ：
获取select 选中的 text :
$(\"#ddlregtype\").find(\"option:selected\").text();

获取select选中的 value:
$(\"#ddlregtype \").val();

获取select选中的索引:
$(\"#ddlregtype \").get(0).selectedindex;

设置select:
设置select 选中的索引：
$(\"#ddlregtype \").get(0).selectedindex=index;//index为索引值

设置select 选中的value：
复制代码 代码如下:

$(\"#ddlregtype \").attr(\"value\",\"normal“);
$(\"#ddlregtype \").val(\"normal\");
$(\"#ddlregtype \").get(0).value = value;

设置select 选中的text:
复制代码 代码如下:

var count=$(\"#ddlregtype option\").length;
for(var i=0;i<count;i++)
{ if($(\"#ddlregtype \").get(0).options[i].text == text)
{
$(\"#ddlregtype \").get(0).options[i].selected = true;
break;
}
}
$(\"#select_id option[text=\'jquery\']\").attr(\"selected\", true);

设置select option项:
复制代码 代码如下:

$(\"#select_id\").append(\"<option value=\'value\'>text</option>\"); //添加一项option
$(\"#select_id\").prepend(\"<option value=\'0\'>请选择</option>\"); //在前面插入一项option
$(\"#select_id option:last\").remove(); //删除索引值最大的option
$(\"#select_id option[index=\'0\']\").remove();//删除索引值为0的option
$(\"#select_id option[value=\'3\']\").remove(); //删除值为3的option
$(\"#select_id option[text=\'4\']\").remove(); //删除text值为4的option

清空 select:

$(\"#ddlregtype \").empty();

工作需要，要获得两个表单中的值。如图：

如何获得从左边选择框添加到右边选择框中的值？我想了想用网页特效可以获得，这里用了比较流行的jquery。
js代码如下：
复制代码 代码如下:

//获取所有属性值 var item = $(\"#select1\").val();
$(function(){
$(\'#select1\').each( //获得select1的所有值
function(){
$(\'button\').click(function(){
alert($(\'#select2\').val()); //获得select2中的select1值
});
});
})
</script>

值得注意的是，不能直接写成
复制代码 代码如下:

$(function(){
$(\'#select2\').each( //获得select1的所有值，因为前面讲选项从左边添加到右边，jquery其实并没有真正将值从左边传到右边。
function(){
$(\'button\').click(function(){
alert($(this).val()); //获得select2中的select1值
});
});
})

html：
复制代码 代码如下:

<div class=\"centent\">
<select multiple=\"multiple\" id=\"select1\" name=\"dd\" style=\"width:100px;height:160px;\">
<option value=\"1\">选项1</option>
<option value=\"2\">选项2</option>
<option value=\"3\">选项3</option>
<option value=\"4\">选项4</option>
<option value=\"5\">选项5</option>
<option value=\"6\">选项6</option>
<option value=\"7\">选项7</option>
</select>
<div>
<span id=\"add\" >选中添加到右边>></span>
<span id=\"add_all\" >全部添加到右边>></span>
</div>
</div>
<div class=\"centent\">
<select multiple=\"multiple\" id=\"select2\" name=\"sel\" style=\"width: 100px;height:160px;\">
</select>
<div>
<span id=\"remove\"><<选中删除到左边</span>
<span id=\"remove_all\"><<全部删除到左边</span>
</div>
</div>

使用JQuery，Ajax调用动态填充Select的option选项
复制代码 代码如下:

//绑定ClassLevel1单击事件
$(\"#ClassLevel1\").change(function () {
var id = $(\"#ClassLevel1\").val();
var level2 = $(\"#ClassLevel2\");
level2.empty();
$(\"#ClassLevel3\").hide();
$.ajax({
url: \"./askCommon.ashx?action=getclasslevel&pid=\" + id,
data: { \"type\": \"ajax\" },
datatype: \"json\",
type: \"get\",
success: function (data) {
var json = eval_r(data);
for (var ind in json) {
level2.append($(\"<option value=\'\" + json[ind].id + \"\'>\" + json[ind].typename + \"</option>\"));
}

}
});
})

本文地址：https://www.stayed.cn/item/15656

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案