下拉列表采用重复值

时间:2016-07-12 13:48:24

标签: html



<label>Service Offering</label></br>
		            <select  style='color:black' id="first_choice" required name="first_pref">
		            <option value="" disabled selected hidden>First preference</option>
                    <option value="Engineering and Design">Engineering and Design</option>
		            <option value="Operations and Design">Operations and Design</option>
		            <option value="Product management">Product management</option>
		            <option value="Developer relations and technical solutions">Developer relations and technical solutions</option>
		            <option value="Sales and account management">Sales and account management</option>
		            <option value="Partnerships">Partnerships</option>
		            <option value="Sales and operations">Sales and operations</option>
	                <option value="Administrative services">Administrative services</option>
     	            <option value="Business strategy planning">Business strategy planning</option>
		            <option value="Finance solutions">Finance solutions</option>
		            <option value="Legal and government relations">Legal and government relations</option>
		            <option value="Marketing and communications">Marketing and communications</option>
		            <option value="Real estate and workplace services">Real estate and workplace services</option>
		            <option value="Social impact solutions">Social impact solutions</option>
		            <option value="Consultancy services">Consultancy services</option>
		            <option value="Investors and funding">Investors and funding</option>
            </select></br></br>
								<!--second preference-->
								<select  style='color:black' id="second_choice" required name="second_pref">
		           
		             <option value="" disabled selected hidden>Second Preference</option>
		            <option value="Engineering and Design">Engineering and Design</option>
		            <option value="Operations and Design">Operations and Design</option>
		            <option value="Product management">Product management</option>
		            <option value="Developer relations and technical solutions">Developer relations and technical solutions</option>
		            <option value="Sales and account management">Sales and account management</option>
		            <option value="Partnerships">Partnerships</option>
		            <option value="Sales and operations">Sales and operations</option>
	                <option value="Administrative services">Administrative services</option>
     	            <option value="Business strategy planning">Business strategy planning</option>
		            <option value="Finance solutions">Finance solutions</option>
		            <option value="Legal and government relations">Legal and government relations</option>
		            <option value="Marketing and communications">Marketing and communications</option>
		            <option value="Real estate and workplace services">Real estate and workplace services</option>
		            <option value="Social impact solutions">Social impact solutions</option>
		            <option value="Consultancy services">Consultancy services</option>
		            <option value="Investors and funding">Investors and funding</option>
            </select></br></br>
			<!--3rd preference-->
								<select style='color:black' id="third_choice" required name="third_pref">
		            <option value="" disabled selected hidden>Third Preference</option>
		            <option value="Engineering and Design">Engineering and Design</option>
		            <option value="Operations and Design">Operations and Design</option>
		            <option value="Product management">Product management</option>
		            <option value="Developer relations and technical solutions">Developer relations and technical solutions</option>
		            <option value="Sales and account management">Sales and account management</option>
		            <option value="Partnerships">Partnerships</option>
		            <option value="Sales and operations">Sales and operations</option>
	                <option value="Administrative services">Administrative services</option>
     	            <option value="Business strategy planning">Business strategy planning</option>
		            <option value="Finance solutions">Finance solutions</option>
		            <option value="Legal and government relations">Legal and government relations</option>
		            <option value="Marketing and communications">Marketing and communications</option>
		            <option value="Real estate and workplace services">Real estate and workplace services</option>
		            <option value="Social impact solutions">Social impact solutions</option>
		            <option value="Consultancy services">Consultancy services</option>
		            <option value="Investors and funding">Investors and funding</option>
            </select>
&#13;
&#13;
&#13;

我有三个下拉列表,它们都包含相同的数据但名称不同。我想要用唯一值选择所有三个列表。这意味着如果在第一个列表中选择1,那么其余两个列表中的1将变为不可用。如何以简单的HTML形式实现它。

1 个答案:

答案 0 :(得分:0)

您可能需要使用Javascript实现此功能,并将某些功能绑定到提交的onClick。这是一个演示:

function checkChoice() {
  // Get choices and put into an array
  var box1 = document.getElementById("first_choice");
  var box2 = document.getElementById("second_choice");
  var box3 = document.getElementById("third_choice");
  var choices = [
    box1.options[box1.selectedIndex].value,
    box2.options[box2.selectedIndex].value,
    box3.options[box3.selectedIndex].value
  ];
  var valuesSoFar = Object.create(null);
  for (var i = 0; i < choices.length; ++i) {
    var value = choices[i];
    if (value in valuesSoFar) {
      console.log("Found a duplicate");
      return false; // We found a duplicate, return false to stop form processing
    }
    valuesSoFar[value] = true;
  }
  console.log("No duplicates found");
  return true; // Everything is fine, continue 
}
<form method="POST" action="#">
  <label>Services Offered</label>
  <br>
  <br>
  <select style='color:black' id="first_choice" required name="first_pref">
    <option value="firstp" disabled selected hidden>First Preference</option>
    <option value="Engineering and Design">Engineering and Design</option>
    <option value="Operations and Design">Operations and Design</option>
    <option value="Product management">Product management</option>
    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option>
    <option value="Sales and account management">Sales and account management</option>
    <option value="Partnerships">Partnerships</option>
    <option value="Sales and operations">Sales and operations</option>
    <option value="Administrative services">Administrative services</option>
    <option value="Business strategy planning">Business strategy planning</option>
    <option value="Finance solutions">Finance solutions</option>
    <option value="Legal and government relations">Legal and government relations</option>
    <option value="Marketing and communications">Marketing and communications</option>
    <option value="Real estate and workplace services">Real estate and workplace services</option>
    <option value="Social impact solutions">Social impact solutions</option>
    <option value="Consultancy services">Consultancy services</option>
    <option value="Investors and funding">Investors and funding</option>
  </select>
  <br>
  <br>
  <select style='color:black' id="second_choice" required name="second_pref">
    <option value="secondp" disabled selected hidden>Second Preference</option>
    <option value="Engineering and Design">Engineering and Design</option>
    <option value="Operations and Design">Operations and Design</option>
    <option value="Product management">Product management</option>
    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option>
    <option value="Sales and account management">Sales and account management</option>
    <option value="Partnerships">Partnerships</option>
    <option value="Sales and operations">Sales and operations</option>
    <option value="Administrative services">Administrative services</option>
    <option value="Business strategy planning">Business strategy planning</option>
    <option value="Finance solutions">Finance solutions</option>
    <option value="Legal and government relations">Legal and government relations</option>
    <option value="Marketing and communications">Marketing and communications</option>
    <option value="Real estate and workplace services">Real estate and workplace services</option>
    <option value="Social impact solutions">Social impact solutions</option>
    <option value="Consultancy services">Consultancy services</option>
    <option value="Investors and funding">Investors and funding</option>
  </select>
  <br>
  <br>
  <select style='color:black' id="third_choice" required name="third_pref">
    <option value="thirdp" disabled selected hidden>Third Preference</option>
    <option value="Engineering and Design">Engineering and Design</option>
    <option value="Operations and Design">Operations and Design</option>
    <option value="Product management">Product management</option>
    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option>
    <option value="Sales and account management">Sales and account management</option>
    <option value="Partnerships">Partnerships</option>
    <option value="Sales and operations">Sales and operations</option>
    <option value="Administrative services">Administrative services</option>
    <option value="Business strategy planning">Business strategy planning</option>
    <option value="Finance solutions">Finance solutions</option>
    <option value="Legal and government relations">Legal and government relations</option>
    <option value="Marketing and communications">Marketing and communications</option>
    <option value="Real estate and workplace services">Real estate and workplace services</option>
    <option value="Social impact solutions">Social impact solutions</option>
    <option value="Consultancy services">Consultancy services</option>
    <option value="Investors and funding">Investors and funding</option>
  </select>
  <br>
  <br>
  <input type="submit" onClick="checkChoice()">
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

该代码段基本上取选择框的三个值,将它们放入一个数组中,然后遍历数组以查看是否有任何值相同。如果是,我们会停止并返回false以停止表单处理,如果找不到,我们会返回true以使表单继续。