我需要使用有限的调查应用程序，并且必须调整提供的代码以满足更高级的功能。
我需要创建加权排名问题，因此用户可以选择他们的前三个选项，数据将进入调查应用程序并可在调查报告中访问。该应用程序仅支持2种类型的问题（文本填充和多项选择），但我可以更改代码，只要它仍然将表单数据发送回调查应用程序。
设置代码，以便为每个选项显示0-3的下拉菜单。现在我想限制用户的选择，这样他们只能选择一个“1”“2”或“3”，共有三个选项。理想情况下，如果用户已经为一个选项选择了“2”并且他们尝试将其选择为另一个选项，则会将第一个“2”设置为“0”或空白。
这可能与javascript有关吗？如果是这样，有没有人知道可能会显示这样的代码的网站，或提供类似的示例，我可以调整它？
此处的当前代码：
<html>
<head><title>Survey</title></head>
<!-- Changes
- remove br to put dropdown next to text for each item. Switch text & dropdown order
for each item.
- add comments to separate each question
- removed blue title font
- add instructions
Goals
- limit choices to one 1 one 2 and one 3, three choices total.
-->
<link href="---" rel="stylesheet" type="text/css">
<body bgcolor="#3c76a3">
<!-- TRANSITIONAL DIALOG BOX -->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="background-attachment: scroll; background-color: #3c76a3; background-repeat: no-repeat; background-position: left top;" bgcolor="#3c76a3" topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="survey">
<tr>
<td><p> </p>
<!-- HEADER END -->
<!-- FORM START TAG --><form name="survey" action="---" method="POST">
<FONT face="Verdana, Arial, Helvetica, sans-serif">
<b>survey</b><hr>
<!-- 1 -->
<input type=hidden name="Buy R.J. a DeLorean_multiple_answers" value="one">
<font size=2><select name="Buy R.J. a DeLorean" SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Buy R.J. a DeLorean_help" value="">
<b><font size=2>Buy R.J. a DeLorean</font></b>
<hr size=1>
<!-- 2 -->
<input type=hidden name="Fill Lisa's office with marshmallows._multiple_answers" value="one">
<font size=2><select name="Fill Lisa's office with marshmallows." SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Fill Lisa's office with marshmallows._help" value="">
<b><font size=2>Fill Lisa's office with marshmallows.</font></b>
<hr size=1>
<!-- 3 -->
<input type=hidden name="Install a beer fridge in everyone's filing cabinets._multiple_answers" value="one">
<font size=2><select name="Install a beer fridge in everyone's filing cabinets." SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Install a beer fridge in everyone's filing cabinets._help" value="">
<b><font size=2>Install a beer fridge in everyone's filing cabinets.</font></b>
<hr size=1>
<!-- 4 -->
<input type=hidden name="Buy a company Cessna_multiple_answers" value="one">
<font size=2><select name="Buy a company Cessna" SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Buy a company Cessna_help" value="">
<b><font size=2>Buy a company Cessna</font></b><br>
<hr size=1>
<!-- 5 -->
<input type=hidden name="Replace Conf2's chairs with miniature ponies._multiple_answers" value="one">
<font size=2><select name="Replace Conf2's chairs with miniature ponies." SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Replace Conf2's chairs with miniature ponies._help" value="">
<b><font size=2>Replace Conf2's chairs with miniature ponies.</font></b>
<hr size=1>
<input type="hidden" name="question_names" value="{Buy R.J. a DeLorean} {Fill Lisa's office with marshmallows.} {Install a beer fridge in everyone's filing cabinets.} {Buy a company Cessna} {Replace Conf2's chairs with miniature ponies.}">
<p align="right"><input type="image" BORDER=0 title="Save Changes" alt="Save Changes" src="---" name="button_save_changes">
<input type="hidden" name="showconfirm" value="T">
<input type="hidden" name="showresults" value="F">
<input type="hidden" name="preventdupesmemberid" value="T">
<input type="hidden" name="preventdupesip" value="F">
<input type="hidden" name="numberquestions" value="F">
<input type="hidden" name="destinationurl" value="">
<input type="hidden" name="original_survey_id" value="62">
<!-- FORM END TAG --></form>
<!-- FOOTER START -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END HEADER -->
</body>
</html>
答案 0 :(得分：0)
警告：以下代码存在问题。它不打算直接插入到您的页面中。这是您可以应用的技术说明。研究它并编写自己的解决方案。
一种选择是在做出选择时记录不可用的选项。
var choose = (function (maxCount) {
var chosen = {};
var count = 0;
function unchoose(value) {
if (chosen[value]) {
delete chosen[value];
--count;
}
}
return function(option) {
if (! chosen[option.value]) {
// option isn't chosen elsewhere
unchoose(option.prevValue);
if (count < maxCount) {
// haven't reached vote limit
chosen[option.value] = true;
option.prevValue = option.value;
++count;
return true;
}
}
if (option.prevValue) {
option.value = option.prevValue;
} else {
option.value = "";
}
return false;
}
})(3);
您可以重构并创建count类，而不是单独的chosen和Set变量，这样可以简化choice：
function Set() {
this.items = {};
this.size=0;
}
Set.prototype.contains = function(item) {
return this.items[item];
}
Set.prototype.add = function(item) {
if (!this.contains(item)) {
this.items[item] = true;
++this.size;
}
}
Set.prototype.remove = function(item) {
if (this.contains(item)) {
delete this.items[item];
--this.size;
}
}
var choose = (function (maxCount) {
var chosen = new Set;
return function(option) {
if (! chosen.contains(option.value)) {
// option isn't chosen elsewhere
chosen.remove(option.prevValue);
if (chosen.size < maxCount) {
// haven't reached vote limit
chosen.add(option.value);
option.prevValue = option.value;
return true;
}
}
// invalid choice; undo it
if (option.prevValue) {
option.value = option.prevValue;
} else {
option.value = "";
}
return false;
}
})(3);
将choose绑定到每个select的onchange属性（尽管在采用此方法之前要认真思考，因为内联事件订阅是有问题的），或者使用DOM事件并订阅以下侦听器：
function choiceListener(evt) {
if (! choose(evt.target)) {
evt.preventDefault();
}
}
如果您可以进行更多更改，请考虑使用类似jQuery的UI互动（具体来说，UI/Draggable，UI/Droppable和UI/Sortable），以允许用户拖动＆amp;删除他们想要投票的项目并按顺序排序。这提供了一个更直观的界面。