0

次のコードは Internet Explorer と Firefox では機能しますが、Chrome では機能しません。誰がどのような変更が必要か考えていますか?

//* From the javascript file    
function hide_show(vals){
        if(vals=="food"){
            $("#fruit").hide().find("input, select, textarea").val("").find('input[type=radio], input[type=checkbox]').attr('checked', false);
            $("#starch").hide().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
            $("#sweets").show().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
        }
    }

HTML ファイルから: ドロップダウン ボックス

<fieldset id="food_type">
<legend>select type of food</legend>           
<label for="food_type">Food questions<span class="require">*</span></label>
<select tabindex="1" class="required" name="food_type" id="food_type"><option value="">Type</option>
<optgroup label="Favorite Food">
<option value="fruit" id="fruit" onclick="hide_show(this.value)">Fruit</option>
<option value="starch" id="homeowners" onclick="hide_show(this.value)">Starch</option>
<option value="sweets" id="sweets" onclick="hide_show(this.value)">Sweets</option>\
</optgroup>
</select>
</fieldset>

HTML ファイルから: ドロップダウン メニューから [フルーツ] を選択した場合に表示される質問のサンプル グループ

    <fieldset id="fruit">
    <legend>About your favorite fruit</legend>

    <label for="color">Color<span class="require">*</span></label>
    <select tabindex="2" class="required" name="color" id="color">
        <option value="">Select</option><option value="orange">Orange</option><option value="yellow">Yellow</option>
    </select>
    <label for="taste">Taste<span class="require">*</span></label>
    <input tabindex="16" style="width:100px; float:left;" type="text" class="required" maxlength="3" size="3" name="age" id="age"/>
    <label for="availability">Availability<span class="require">*</span></label>
    <select tabindex="17" class="required" name="availability" id=" availability ">
        <option value="">Select</option><option value="restaurant">Restaurants</option><option value="farmermkt">Farmers Market</option><option value="Grocer">Grocer</option>
    </select>
    </fieldset>
4

2 に答える 2

1

私はあなたのコードを作り直しました：オプションリストのonclickイベントを選択レベルに変更し、on changeイベントを使用しました

html:

<fieldset id="food_type">
<legend>select type of food</legend>           
<label for="food_type">Food questions<span class="require">*</span></label>
<select tabindex="1" class="required" name="food_type" id="food_type" onchange="hide_show();"><option value="">Type</option>
<optgroup label="Favorite Food">
<option value="fruit" id="fruit" >Fruit</option>
<option value="starch" id="homeowners" >Starch</option>
<option value="sweets" id="sweets">Sweets</option>\
</optgroup>
</select>
</fieldset>

<fieldset id="fruit">
<legend>About your favorite fruit</legend>

<label for="color">Color<span class="require">*</span></label>
<select tabindex="2" class="required" name="color" id="color">
<option value="">Select</option><option value="orange">Orange</option><option value="yellow">Yellow</option>
</select>
<label for="taste">Taste<span class="require">*</span></label>
<input tabindex="16" style="width:100px; float:left;" type="text" class="required" maxlength="3" size="3" name="age" id="age"/>
<label for="availability">Availability<span class="require">*</span></label>
<select tabindex="17" class="required" name="availability" id=" availability ">
    <option value="">Select</option><option value="restaurant">Restaurants</option><option value="farmermkt">Farmers Market</option><option value="Grocer">Grocer</option>
</select>
</fieldset>

次にJavascript

    <script type="text/javascript">
function hide_show(){
var option = document.getElementById("food_type").value;
switch (option)
{
case 'fruit':
    $("#fruit").hide().find("input, select, textarea").val("").find('input[type=radio], input[type=checkbox]').attr('checked', false);
    break;
case 'starch':              
$("#starch").hide().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
    break;
case 'sweets':  
$("#sweets").show().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
    //}
}
    }
    </script>

ここにJSFiddleがあります

于 2013-07-12T04:40:21.447 に答える