动态添加SELECT标签中的元素，数据项与option数据源不一致_option[value='0'].attr(selected,selected)-优快云博客

本文链接：https://blog.youkuaiyun.com/chris_sen/article/details/72457534

本文介绍了在动态添加SELECT标签元素时，遇到数据项与option数据源不一致的情况。针对这种情况，文章提供了修改列表中某项数据，特别是包含下拉选项的数据时的解决方案。使用JQuery实现界面赋值，并在提交时通过隐藏域保存下拉选项的text值。同时，文章还简要讲解了如何添加和删除select的option项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例描述：修改列表中的某一项数据，其中一列是下拉选项，下拉选项中的数据源areaList是系统配置的，但是数据中有些迁移数据，该列中的值不在数据源范围内。修改时，该下拉选项显示正确的信息，并可以修改。

修改时界面赋值代码如下：

  function setEditValue(......,city_area) {
    ......
  
	if(city_area =="xxx"){
		$("#cityAreaSelect option[value='0']").remove();
		
		var option = "<option value='0'>" + city_area + "</option>";
		$("#cityAreaSelect").prepend(option);   
		$("#cityAreaSelect option[value='0']").attr("selected", "selected");
	}else{
		  $("#cityAreaSelect option").each(
		    		function(index,item){
		    			 $(item).removeAttr("selected");
		                 if ($(item).val() == city_area) {
		                     $(item).attr("selected", "selected");	
		                 }
		    		});
	}
    
   $.layer({
      type: 1,
      area: ['610', 'auto'],
      title: '编辑信息',
      page: {dom : '#showEditPage'}
    });	
  }

思路：就是把该信息项放到option中设置好value，添加到select中的第一个元素，然后让该项被选中，注意最开始的时候要remove该项，不让的话，每次点击修改，下拉框的信息会一直增加该项信息。

界面选择信息提交时，在form表单中做一个隐藏域保存下拉选项text值：

<select class="xf_ht_jr_dfk_i" name="cityArea" id="cityArea">
	<option value="0">
		请选择 
	</option>
	#{list cityAreaList}
		<option value="${_}">
			${_}
		</option>
	#{/list}
</select>

<input type="hidden" name="cityArea" id="inputCityArea"  value="${flash?.cityArea}"/>

function submitOk(){
	......
	$("#inputCityArea").val($("#cityArea option:selected").text().trim());
		
	$("#addGroup").submit();
}

下面科普下添加/删除select的option项的方法：

      1. jQuery("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)

      2. jQuery("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)

      3. jQuery("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)

      4. jQuery("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)

      5. jQuery("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option

      6. jQuery("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option

      内容清空：

      jQuery("#select_id").empty();

获取select的text和value:

      1. var checkText=jQuery("#select_id").find("option:selected").text();   //获取Select选择的Text

      2. var checkValue=jQuery("#select_id").val();   //获取Select选择的option Value

      3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值

      4. var maxIndex=jQuery("#select_id option:last").attr("index");   //获取Select最大的索引值