Question

我想要3个下拉表格和一个确认按钮。按下确认按钮时，它会检查所有3个下拉框是否都选择了一个值，然后显示具有匹配值的图像。

到目前为止，我唯一要做的就是发出警告错误消息，我也只有2个下拉菜单，但是现在还可以

我真的快要疯了。

function Confirm(){
var people = document.getElementById ("people")
if ((people.value == "") || (food.value == "")){
	alert ("please select an option")

	return false;
}

		return true;
}


function show(){
var people = document.getElementById ("people")
if (people.value == "1"){
document.getElementById("here").innerHTML='<img src="images/tourism.jpg">';	
} 


}

 <body>

<form>
<select id="people"> 
      <option value=""> Please Select </option>
      <option value="1"> option 1 </option>
      <option value="2"> option 2 </option>
</select>

<select id="food"> 
      <option value=""> Please Select </option>
      <option value="1"> option 1 </option>
      <option value="2"> option 2 </option>
</select>

<input type="submit" value="confirm" onclick="return Confirm()" onclick="return show()" />
</form>


<div id="here">
</div>


  </body>

Answer 1

将按钮类型更改为button，不要使用两个onclick事件，只需在Confirm（）中调用show（）即可。

function Confirm(){
var people = document.getElementById ("people");
var food = document.getElementById ("food");
if ((people.value == "") || (food.value == "")){
	alert ("please select an option");
}else{
show();
}
}


function show(){
var people = document.getElementById ("people")
if (people.value == "1"){
document.getElementById("here").innerHTML='<img src="images/tourism.jpg"/>';	
} 
}

<body>

<form>
<select id="people"> 
      <option value=""> Please Select </option>
      <option value="1"> option 1 </option>
      <option value="2"> option 2 </option>
</select>

<select id="food"> 
      <option value=""> Please Select </option>
      <option value="1"> option 1 </option>
      <option value="2"> option 2 </option>
</select>

<input type="button" value="confirm" onclick="Confirm()" />
</form>


<div id="here">
</div>


  </body>

Answer 2

change your button type to button and remove show method 

<body>
    <form method="post">
          <select id="people">
                <option value=""> Please Select </option>
                <option value="1"> option 1 </option>
                <option value="2"> option 2 </option>
          </select>

          <select id="food">
                <option value=""> Please Select </option>
                <option value="1"> option 1 </option>
                <option value="2"> option 2 </option>
          </select>
          <button type="button" onclick="return clickFunction()">confirm</button>
    </form>

    <div id="here"> </div>

    <script>
        function clickFunction(){
          var people = document.getElementById ("people");
          var food = document.getElementById ("food");

          if ((people.value == "") || (food.value == "")){
              alert ("please select an option");
              return false;
          }

          if (people.value == "1"){
                document.getElementById("here").innerHTML='<img src="images/tourism.jpg">';
          }

        }
    </script>
      </body>

Answer 3

您可以使用类似这样的东西。我做了通用方法，因此对于Confirm，下拉列表的数量无关紧要。

带有选择类的HTML：

<form>
    <select id="people" class="dropdown" name="People"> 
        <option value=""> Please Select </option>
        <option value="1"> option 1 </option>
        <option value="2"> option 2 </option>
    </select>

    <select id="food" class="dropdown" name="Food"> 
        <option value=""> Please Select </option>
        <option value="1"> option 1 </option>
        <option value="2"> option 2 </option>
    </select>

    <input type="button" value="Confirm" onclick="return Confirm()" />
</form>

遍历下拉列表的javascript：

function Confirm(){
    var elements = document.getElementsByClassName("dropdown");
    // or : var elements = $$("dropdown");

    [].forEach.call(elements, function(element){
        if(element.value == undefined || element.value.trim() == '')
        {
            alert('Select an option for ' + element.name);
            return false;
        }
    });

    // Others checks

    // All is OK, so we can show the selection.
    Show();
}


function Show(){
    var people = document.getElementById ("people");
    var html = '';

    switch(people.value)
    {
       case 1 :
           html = '<img src="images/tourism.jpg">';
           break;

       // Other cases

       default :
           html = '<img src="images/undefined.jpg">';
           break;
    }

    document.getElementById("here").innerHTML=html;
}

使用JavaScript显示图像的多个下拉菜单

3 个答案: