在javascript或jquery中首先选择后,如何修复另一个下拉值?

时间:2012-07-04 09:56:06

标签: javascript jquery html

我有一个带有2个下拉菜单的表单。 我想要的是,当我选择第一个下拉框时,一个特定的选项被修复(用户不能在该表格中更改)到另一个下拉框。我怎么能在javascript或jquery中做到这一点?

<select id="item_type" name="item_type" style="width:300px;" ">
                              <option value=''>-- Select --</option>
                              <option value="City">City</option>
                              <option value="Source">Source</option>
                              <option value="Follow Up">Follow Up</option>
                              <option value="Next Day">Next Day</option>                            
</select> 

<select id="item_value_type" name="item_value_type" style="width:300px;" ">
                              <option value=''>-- Select --</option>
                              <option value="value">value</option>
                              <option value="id">id</option>                            
</select>  

4 个答案:

答案 0 :(得分:0)

jQuery方式

var valueType = $('#item_value_type')
$('#item_type').on('change', function(e) {
  valueType.val('thefixedvalue'); // sets the value
  valueType.attr('disabled', true); //disables the select
});

要启用选择,只需使用

valueType.removeAttr('disabled');

javascript方式

var valueType = document.getElementById('item_value_type');
var itemType = document.getElementById('item_type');
itemType.onchange = function(event) {
  valueType.value = 'yourFixedValue';
  valueType.setAttribute('disabled', 'disabled');
}

启用选择:

valueType.removeAttribute('disabled');

答案 1 :(得分:0)

你可以这样做:

<select id="item_type" name="item_type" style="width:300px" onchange=javascript:change(this.value)>
         <option value=''>-- Select --</option>
         <option value="City">City</option>                         
</select>

在更改功能中,您可以修改其他选择字段。下拉框。

答案 2 :(得分:0)

<强> Jquery的:

$("#target_sel").attr("disabled",true);
$("#first_sel").on("change",function(){
   $("#target_sel").val($(this).val())
})

答案 3 :(得分:0)

工作演示 http://jsfiddle.net/LXRqm/

API:changehttp://api.jquery.com/change/ prophttp://api.jquery.com/prop/

您也可以prop('disabled', false)将其设置为活动状态。

希望这会有所帮助,并随意玩演示,

<强>码

var secondSelect = $('#item_value_type');
var hulkChange = "value";

$('#item_type').change(function() {
     secondSelect.val(hulkChange); 
     secondSelect.prop('disabled', true);
});​