选择选项的Javascript不适用于Chrome浏览器

以下代码适用于Internet Explorer和Firefox，但不适用于Chrome。有没有人有一个想法需要修改？选择选项的Javascript不适用于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>

来源

2013-07-12 John Montague

您需要使用onchange（）事件进行选择，而不是针对每个选项使用onclick，如

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

来源

2013-07-12 04:22:41

谢谢，这工作。 –

我重新工作的代码：改变onclick事件选项列表，是在特定的水平，对改变事件

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-12 04:40:21

选择选项的Javascript不适用于Chrome浏览器

回答

相关问题