Question

您好我有一些测试/测验的代码，它不能在谷歌浏览器，Internet Explorer和其他浏览器上运行核心，除了Mozilla Firefox。谁能帮我？这是以下代码将向您显示具体问题，如果您单击，您将看到它。

<div id="showDiv"  style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Volvo?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Volvo? 
</form></div>
<div id="placeDiv" style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Saab?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Opel? 
</form></div>
<div id="makeDiv" style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Opel?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Opel? 
</form></div>
<div id="createDiv" style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Audi?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Audi? 
</form></div>
<select id="car" value="Show Div" >
<option value="volvo" name="volvo" onclick="showDiv()">Volvo</option>
<option value="saab" name="saab" onclick="placeDiv()">Saab</option>
<option value="opel" name="opel" onclick="makeDiv()">Opel</option>
<option value="audi" name="audi" onclick="createDiv()">Audi</option>
</select>

关注javascript代码：

<script>
function showDiv() {
document.getElementById('showDiv').style.display = "block";
document.getElementById('placeDiv').style.display = "none";
document.getElementById('makeDiv').style.display = "none";
document.getElementById('createDiv').style.display = "none";   
}
function placeDiv() {
document.getElementById('placeDiv').style.display = "block";
document.getElementById('showDiv').style.display = "none";
document.getElementById('makeDiv').style.display = "none";
document.getElementById('createDiv').style.display = "none";   
}
function makeDiv() {
document.getElementById('makeDiv').style.display = "block";
document.getElementById('showDiv').style.display = "none";
document.getElementById('placeDiv').style.display = "none"
document.getElementById('createDiv').style.display = "none";
}
function createDiv() {
document.getElementById('createDiv').style.display = "block";
document.getElementById('showDiv').style.display = "none";
document.getElementById('placeDiv').style.display = "none";
document.getElementById('makeDiv').style.display = "none";
}
</script>

因此，您可以看到这是所有代码。首先在Mozilla中运行它，然后在Internet Explorer或Google Chrome中运行，如果有人可以提供帮助:(。谢谢！

Answer 1

跨浏览器无法可靠地支持click元素上的option事件。

使用change元素上的select事件代替。（这也将消除很多的重复代码。）请注意，正如RobG在下面指出的那样，在某些浏览器上，如果用户使用光标键移动选项列表，change将会立刻被解雇;其他浏览器在选择框失去焦点之前不会触发它。

以下是一个示例：Live Copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body>
<div id="showDiv"  style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Volvo?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Volvo? 
</form></div>
<div id="placeDiv" style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Saab?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Opel? 
</form></div>
<div id="makeDiv" style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Opel?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Opel? 
</form></div>
<div id="createDiv" style="display:none;" class"answer_radio" > 
<form action="">
<input type="checkbox" name="vehicle" value="drive">Do you drive Audi?<br>
<input type="checkbox" name="vehicle" value="love">Do you love Audi? 
</form></div>
<select id="car">
<option value="volvo" name="volvo">Volvo</option>
<option value="saab" name="saab">Saab</option>
<option value="opel" name="opel">Opel</option>
<option value="audi" name="audi">Audi</option>
</select>
<script>
  (function() {
    // Get the select box
    var select = document.getElementById("car");

    // Hook the change event
    select.onchange = handleSelectedCar;

    // Set up for the default value of the select
    handleSelectedCar();

    // Function to handle the setup for a car
    function handleSelectedCar() {
      var name = select.value;

      // Replace the following with the code to show/hide your divs
      var p = document.createElement('p');
      p.innerHTML = "Currently-selected car: " + name;
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

Answer 2

您可以将Select与JavaScript一起使用，如下所示。它适用于所有浏览器。

 <select name="type" onmousedown="this.value='';" onchange="alert('Changed.');">
      <option value='1'>One</option>
      <option value='2'>Two</option>
      <option value='3'>Three</option>
      <option value='4'>Four</option>
    </select>

OR

<script type="text/javascript">
function changeHandler(target){
    alert(target.value);
}
</script>
<select id="abc" onchange="changeHandler(this);">         
      <option value='1'>One</option>
      <option value='2'>Two</option>
      <option value='3'>Three</option>
      <option value='4'>Four</option>

</select>

或者 已更新

<script type="text/javascript">
function changeHandler(target){
    if(target.value == "Mustang" ){
        document.getElementById('div_id_Mustang').style.display = "block";
    }
    if(target.value == "Viper" ){
        document.getElementById('div_id_Viper').style.display = "block";
    }
    if(target.value == "Corvette" ){
        document.getElementById('div_id_Corvette').style.display = "block";
    }
}
</script>
<select id="cars" onchange="changeHandler(this);">
  <option value="Mustang">Mustang</option>
  <option value="Viper">Viper</option>
  <option value="Corvette">Corvette</option>
</select>

以下代码不适用于其他浏览器

2 个答案: