Question

以下代码适用于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>

Answer 1

我重新编写了代码：更改了选项列表上的onclick事件，处于选择级别，具有on change event

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

Answer 2

您需要为每个选项使用onchange（）事件进行select而不是onclick，例如

<select tabindex="1" class="required" name="food_type" id="food_type" onchange="hide_show(this.value);">
    ..remove onclick from options
</select>

用于选择选项的Javascript在Chrome浏览器中无效

2 个答案: