Question

我已经设置了一个jQuery函数，它在更改第一个之后隐藏和取消隐藏相关的选择。问题是，如果用户选择一个值，然后将其更改为另一个相关选择中的另一个值，那么他选择的第一个值将保持选中状态，并且它们都会随表单一起提交。如果用户改变主意，我该如何重置隐藏的选择值？

这是我的代码：

/*Setup jQuery Function to hide/unhide selects */

<script>        
$(document).ready(function(){
 var $topSelect = $('select[name="dropdownmain"]');
    var $nestedSelects = $('select[name!="dropdownmain"]');
    showApplicableSelect();
    $topSelect.change(showApplicableSelect);

    function showApplicableSelect() {
        $nestedSelects.hide();
        $('select[name="' + $topSelect.val() + '"]').show();
    }
 }); 
</script>


/* Example of the select items and how they are related */


<select class=" form-textbox validate[required]" onChange="change()" name="dropdownmain" id="" title="">    <option selected="selected" value="PLEASE SELECT">PLEASE SELECT</option>
<option value="1">Accommodation and Food Services</option>
<option value="2">Administrative / Support / Waste Management / Remediation Services</option>
<option value="3">Agriculture / Forestry / Fishing / Hunting</option>
<option value="4">Arts / Entertainment / Recreation</option>
<option value="5">Automotive</option>
<option value="6">Construction</option>
<option value="7">Educational Services</option>
<option value="8">Finance and Insurance</option>
<option value="9">Health Care and Social Assistance</option>
<option value="10">Information</option>
<option value="11">Manufacturing</option>
<option value="12">Other</option>
<option value="13">Other Services</option>
<option value="14">Professional / Scientific and Technical Services</option>
<option value="15">Real Estate and Rental and Leasing</option>
<option value="16">Retail Trade</option>
<option value="17">Transportation and Warehousing</option>
</select>
<select class=" form-textbox validate[required]" name="PLEASE SELECT" id="2" title="">     <option value="">   </option> </select>
<select class=' form-textbox validate[required]' name='1' id='' title=''>   <option selected='selected'  value='PLEASE SELECT'>PLEASE SELECT</option>
<option value='1'>Bakery / Cafes</option>
<option value='2'>Bed and Breakfast Inns</option>
<option value='3'>Carryout restaurants</option>
<option value='4'>Casual Dining Restaurant $$-</option>
<option value='5'>Coffee Shop</option>
<option value='6'>Drinking Places (Alcoholic Beverages)</option>
<option value='7'>Fast-food Restaurants</option>
<option value='8'>Fine Dining Restaurant $$$+</option>
<option value='9'>Full Service Restaurant</option>
<option value='10'>Hotels and Motels</option>
<option value='11'>Other food related services</option>
<option value='12'>Travel Agencies</option>
<option value='27'>Other</option>
</select>

Answer 1

使用jQuery

重置所选媒体资源
强制值为初始值

代码：

$nestedSelects
  .prop("selected", false)
  .val("-1")  // or .val("PLEASE SELECT")
  .hide();

我已将您的HTML下拉初始值从“PLEASE SELECT”更新为-1。

<option selected='selected' value='-1'>PLEASE SELECT</option>

jsfiddle
w3schools中经过测试的表格：）

在OnChange事件后重置隐藏的选择值

1 个答案: