Today you asked me a question about dynamically adding options in <select>. At first, I thought it was dynamically added in JS, so I used the method of dynamically adding options in JS, but you used JQuery, so I kept making mistakes. Let's note the difference between adding options in JS and JQuery.
JS：var selid = document.getElementById("sltid");
for(var i=0; i<10;i++){ //loop adding multiple values
sid.option[i] = new Option(i,i);
}
sid.options[sid.options.length]=new Option("1","2"); // add one more after the last value
JQuery：
$("#selectId").append("<option value='"+value+"'>"+text+"</option>");
Of course, in addition to this sentence, there are also settings for the default selection value, the first value, the last value, the Nth value, etc., so I searched for it on the Internet:
jQuery gets the Text and Value selected by Select:
1. $("#select_id").change(function(){//code...}); //Add an event to Select, which is triggered when one of the items is selected
2. var checkText=$("#select_id").find("option:selected").text(); //Get the Text selected by Select
3. var checkValue=$("#select_id").val(); //Get the Value selected by Select
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //Get the index value selected by Select
5. var maxIndex=$("#select_id option:last").attr("index"); //Get the maximum index value of Select
jQuery add/remove Select's Option item:
1. $("#select_id").append("<option value='Value'>Text</option>"); //Append an Option (drop-down item) to Select
2. $("#select_id").prepend("<option value='0'>Please select</option>"); //Insert an Option for Select (the first position)
3. $("#select_id option:last").remove(); //Remove the Option with the largest index value in the Select (the last one)
4. $("#select_id option[index='0']").remove(); //Remove Option (the first) with index value 0 in Select
5. $("#select_id option[value='3']").remove(); //Remove Option with Value='3' in Select
5. $("#select_id option[text='4']").remove(); //Remove Option with Text='4' in Select
jquery traverses the text value of option in select
$("#selectid option").each(function (){
if($(this).text()==name){
alert("Name already exists, please re-enter");
}});
First, the basic value problem
例如<select class="selector"></select>
1. Set the value of the item to pxx to be selected
$(".selector").val("pxx");
2. Set text to pxx item selection
$(".selector").find("option[text='pxx']").attr("selected",true);
Here is a usage of square brackets. The equal sign in square brackets is preceded by the attribute name without quotation marks. In many cases, the use of square brackets can make logic very simple.
3. Get the value of the currently selected item
$(".selector").val();
4. Get the text of the currently selected item
$(".selector").find("option:selected").text();
The colon is used here, and mastering its usage and inferring other things will also make the code more concise.
Second, the cascade of selects is often used , that is, the value of the second select changes with the value selected by the first select. This is very simple in jquery.
如：$(".selector1").change(function(){
// clear the second one first
$(".selector2").empty();
// In practical applications, the options here are generally generated by looping
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});
3. jQuery gets the Text and Value selected by Select:
Syntax Explanation:
1. $("#select_id").change(function(){//code...}); //Add an event to Select, which is triggered when one item is selected
2. var checkText=$(" #select_id").find("option:selected").text(); //Get the Text selected by Select 3. var checkValue=$("#select_id").val(); //Get the Value 4
selected by Select
.var checkIndex=$("#select_id ").get(0).selectedIndex; //Get the index value selected by Select
5. var maxIndex=$("#select_id option:last").attr("index"); //Get the maximum index value of Select
4. jQuery sets the Text and Value selected by Select:
语法解释：
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
五、jQuery添加/删除Select的Option项：
语法解释：
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
六、jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关
1 获取一组radio被选中项的值
var item = $('input[name=items][checked]').val();
2 获取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
3 select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
4 radio单选组的第二个元素为当前选中值
$('input[name=items]').get(1).checked = true;
七、获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框 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的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框