1

我需要使用有限的调查应用程序，并且必须调整提供的代码以满足更高级的功能。

我需要创建一个加权排名问题，以便用户可以选择他们的前三个选项，数据将进入调查应用程序并在调查报告中访问。该应用程序仅支持 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>&nbsp;</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>
4

1 回答 1

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和变量，这会简化一点：chosenSetchoice

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到每个选择的onchange属性（尽管在采用这种方法之前要仔细考虑，因为内联事件订阅是有问题的），或者使用 DOM 事件并订阅以下侦听器：

function choiceListener(evt) {
    if (! choose(evt.target)) {
        evt.preventDefault();
    }
}

如果您可以进行更多更改，请考虑使用 jQuery 的UI交互（特别是UI/Draggable、UI/Droppable和UI/Sortable）来允许用户拖放他们想要投票的项目并按顺序对其进行排序。这提供了一个更直观的界面。

于 2010-05-05T02:38:02.040 回答