JavaScript 禁用 Select 选项
JavaScript Disable Select Option
我有 3 个 select 框,一个是另外两个的控件。
我的问题是,即使我 select 来自 option_selector 的选项 2 隐藏了选项 1 框,表单仍会尝试为选项 1 select 传递一些内容。
形式 post
中的 sting 示例
www.blank.com/Main/NewCustomers/newappstodetails.asp?options=option2&varintBusinessTypeID=&varintBusinessTypeID=23
我应该只有一个 varintBusinessTypeID。我需要 option1 被禁用而不是隐藏,所以它不会尝试传递任何东西。
<select id="option_selector" name="options">
<option value="option1">Office Options</option>
<option value="option2">Retial Options</option>
</select>
<div id="options">
<div id="option1">
<select name="varintBusinessTypeID" id="varintBusinessTypeID">
<option value="">Please Select</option>
<option value="1">Office1</option>
<option value="2">Office2</option>
<option value="3">Office3</option>
</select>
</div>
<div id="option2">
<select name="varintBusinessTypeID" id="varintBusinessTypeID">
<option value="">Please Select</option>
<option value="1">Retail1</option>
<option value="2">Retail2</option>
<option value="3">Retail3</option>
</select>
</div>
</div>
$('#option_selector').change(refresh_inputs);
refresh_inputs();
function refresh_inputs() {
var name = $('#option_selector').attr('name');
var val = $('#option_selector').val();
$('#' + name + ' div').hide();
$('#' + val).show();
}
您可以将 select 的名称属性设置为空字符串。
$(document).ready(function(){
$('#option_selector').change(refresh_inputs);
refresh_inputs();
});
function refresh_inputs() {
var name = $('#option_selector').attr('name');
var val = $('#option_selector').val();
$('#' + name + ' div').hide();
$('#' + name + ' div select').attr('name', '');
$('#' + val).show();
$('#' + val + ' select').attr('name', 'varintBusinessTypeID');
}
此外,您可能不希望 DOM 中的 2 个元素具有相同的 ID (varintBusinessTypeID)。
首先,ID必须是唯一的,不能重复id="varintBusinessTypeID"
。
你可以使用像
这样的东西
<select id="option_selector" name="options">
<!-- ... -->
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option1">
<!-- ... -->
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option2">
<!-- ... -->
</select>
然后,要禁用 select
,您可以使用 disabled
属性(在 jQuery 中使用 prop
):
function refresh_inputs() {
var val = $('#option_selector').val();
$('[name="varintBusinessTypeID"]').hide().prop('disabled', true);
$('#varintBusinessTypeID-'+val).show().prop('disabled', false);
}
$('#option_selector').change(refresh_inputs);
refresh_inputs();
function refresh_inputs() {
var val = $('#option_selector').val();
$('[name="varintBusinessTypeID"]').hide().prop('disabled', true);
$('#varintBusinessTypeID-'+val).show().prop('disabled', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form>
<select id="option_selector" name="options">
<option value="option1">Office Options</option>
<option value="option2">Retial Options</option>
</select>
<div id="options">
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option1">
<option value="">Please Select</option>
<option value="1">Office1</option>
<option value="2">Office2</option>
<option value="3">Office3</option>
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option2">
<option value="">Please Select</option>
<option value="1">Retail1</option>
<option value="2">Retail2</option>
<option value="3">Retail3</option>
</select>
</div>
<input type="submit" />
</form>
我有 3 个 select 框,一个是另外两个的控件。 我的问题是,即使我 select 来自 option_selector 的选项 2 隐藏了选项 1 框,表单仍会尝试为选项 1 select 传递一些内容。
形式 post
中的 sting 示例www.blank.com/Main/NewCustomers/newappstodetails.asp?options=option2&varintBusinessTypeID=&varintBusinessTypeID=23
我应该只有一个 varintBusinessTypeID。我需要 option1 被禁用而不是隐藏,所以它不会尝试传递任何东西。
<select id="option_selector" name="options">
<option value="option1">Office Options</option>
<option value="option2">Retial Options</option>
</select>
<div id="options">
<div id="option1">
<select name="varintBusinessTypeID" id="varintBusinessTypeID">
<option value="">Please Select</option>
<option value="1">Office1</option>
<option value="2">Office2</option>
<option value="3">Office3</option>
</select>
</div>
<div id="option2">
<select name="varintBusinessTypeID" id="varintBusinessTypeID">
<option value="">Please Select</option>
<option value="1">Retail1</option>
<option value="2">Retail2</option>
<option value="3">Retail3</option>
</select>
</div>
</div>
$('#option_selector').change(refresh_inputs);
refresh_inputs();
function refresh_inputs() {
var name = $('#option_selector').attr('name');
var val = $('#option_selector').val();
$('#' + name + ' div').hide();
$('#' + val).show();
}
您可以将 select 的名称属性设置为空字符串。
$(document).ready(function(){
$('#option_selector').change(refresh_inputs);
refresh_inputs();
});
function refresh_inputs() {
var name = $('#option_selector').attr('name');
var val = $('#option_selector').val();
$('#' + name + ' div').hide();
$('#' + name + ' div select').attr('name', '');
$('#' + val).show();
$('#' + val + ' select').attr('name', 'varintBusinessTypeID');
}
此外,您可能不希望 DOM 中的 2 个元素具有相同的 ID (varintBusinessTypeID)。
首先,ID必须是唯一的,不能重复id="varintBusinessTypeID"
。
你可以使用像
这样的东西<select id="option_selector" name="options">
<!-- ... -->
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option1">
<!-- ... -->
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option2">
<!-- ... -->
</select>
然后,要禁用 select
,您可以使用 disabled
属性(在 jQuery 中使用 prop
):
function refresh_inputs() {
var val = $('#option_selector').val();
$('[name="varintBusinessTypeID"]').hide().prop('disabled', true);
$('#varintBusinessTypeID-'+val).show().prop('disabled', false);
}
$('#option_selector').change(refresh_inputs);
refresh_inputs();
function refresh_inputs() {
var val = $('#option_selector').val();
$('[name="varintBusinessTypeID"]').hide().prop('disabled', true);
$('#varintBusinessTypeID-'+val).show().prop('disabled', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form>
<select id="option_selector" name="options">
<option value="option1">Office Options</option>
<option value="option2">Retial Options</option>
</select>
<div id="options">
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option1">
<option value="">Please Select</option>
<option value="1">Office1</option>
<option value="2">Office2</option>
<option value="3">Office3</option>
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option2">
<option value="">Please Select</option>
<option value="1">Retail1</option>
<option value="2">Retail2</option>
<option value="3">Retail3</option>
</select>
</div>
<input type="submit" />
</form>