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

【问题标题】：Reset hidden select value after OnChange eventOnChange 事件后重置隐藏的选择值
【发布时间】：2017-03-27 04:36:15
【问题描述】：

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

这是我的代码：

/*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>

【问题讨论】：

stackoverflow.com/questions/1033944/… 您需要找到具有selected="selected" 的选项并删除该属性。 @ 987654322@ 上面发布的答案说，您可以在 Firefox 和 safari 上将其设为“假”，但 W3C 标准表示不一样，因此最好在选择新值之前将其取下。抱歉，Jquery 不足以编写您的 sn-p 代码，但阅读这些手册您可以应用此逻辑。
另见最后一个答案stackoverflow.com/questions/8496722/…
知道了。是的，这就是我试图用 jQuery 做的事情。由于某种原因，我在选择中使用“OnChange”调用的函数不起作用。我认为这是因为正在从 Document Ready 调用。如何让我的函数被全局调用？
真的不确定，但请检查 eventListener，但是查看您的代码，您可以将其添加到 onChange() 函数或在其后附加一个新函数onchange="onchage(); anotherFunction();" 希望这对 js/jquery 有所帮助远在我的记忆中
我知道发生了什么。我的页面正在调用一些干扰我的 jQuery 的 javascript。我删除了它，然后能够使用 .change 函数来重置我的子选择。我学到的一件重要的事情是，如果您更改隐藏选择对象的选定值，您必须将 .change() 函数链接到它，以便它在浏览器中更新。像这样：

标签： php jquery select onchange reset

【解决方案1】：

使用jQuery来

重置所选属性并
将值强制为初始值

代码：

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

我已将您的 HTML 下拉菜单初始值从“请选择”更新为 -1。

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

jsfiddle
w3schools 中的测试表格:)

【讨论】：