<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形式实现它。
答案 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以使表单继续。