具有重复值的下拉列表

Question

<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>

我有三个下拉列表，它们都包含相同的数据但名称不同。我希望使用唯一值选择所有三个列表。这意味着如果在第一个列表中选择了 1，那么其余两个列表中的 1 将不可用。如何用一个简单的 HTML 表单来实现它。

Answer 1

您可能需要使用 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>

sn-p 基本上是取选择框的三个值，放入一个数组中，然后循环遍历数组，看有没有相同的值。如果是，我们停止并返回false 以停止表单处理，如果没有找到，我们返回true 让表单继续。