JavaScript禁用选择选项

Question

我有3个选择框，其中一个是其他2个的控件。我的问题是，即使我从option_selector中选择option2，option1框也被隐藏了，但表单仍然尝试为option1 select传递某些内容。

表单发布中的刺痛示例

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();
}

Answer 1

您可以将选择的name属性设置为空白字符串。

$(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）。

Answer 2

首先，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>