2017-03-27 3 views
0

aが最初に変更された後、関連選択を非表示および非表示にするjQuery関数をセットアップしました。問題は、ユーザーが1つの値を選択して別の関連選択で別の値に変更した場合、最初に選択したものが選択されたままで、それらが両方ともフォームとともに提出されるということです。 ユーザーが気が変わったら隠しセレクト値をリセットするにはどうすればいいですか?ここで OnChangeイベントの後に隠しセレクト値をリセットする

は私のコードです:

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

http://stackoverflow.com/questions/1033944/what-values-can-appear-in-the-selected-attribute-of-the -option-tag 'selected ="が選択されているオプションを見つけ、属性を削除する必要があります。 https://api.jquery.com/removeAttr/上記の答えは、FirefoxとSafariでは「偽」にすることができますが、W3Cのスタンダードでは新しい値を選択する前にそれを取り除くほうがいいと言っています。 Sry、スニペットをコーディングするのにJQueryには足りないが、そのマニュアルを読んでこのロジックを適用することができます。 –

+0

こちらも最後の答えをご覧くださいhttp://stackoverflow.com/questions/8496722/reset-un-select-select-option?rq=1 –

+0

入手しました。はい、それは私がjQueryを使ってやろうとしていることです。何らかの理由で、私がselectで 'OnChange'を使って呼び出す関数は機能していません。私はDocument Readyから呼び出されているからだと思います。私の機能をグローバルに呼び出すにはどうすればよいですか? – Jamey16

答えて

0

使用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 :)

関連する問題