0

我正在尝试根据用户在选择框中的选择执行带有 if/else 条件的函数。选择框允许进行多项选择，并且选项由 optgroups 分隔。

我已经尝试了 .selectedIndex、.option[] 和现在 .indexOf 的 if 条件 - 但似乎没有什么符合我的预期逻辑。我正在学习 javascript/jQuery，所以请原谅任何新手失礼！

关于我应该做什么的任何建议？

HTML

    <select id="box1" style="width:500px" multiple>
    <optgroup label="Stage I">
    <option selected>Complete</option>
    </optgroup>
    <optgroup label="Stage II">
    <option>Micro two one</option>
    <option>Micro two two</option>
    <option>Intra one</option>
    </optgroup>
    <optgroup label="Stage III">
    <option>Macro two two</option>
    <option>Macro one one</option>
    </optgroup>
    <option>Not applicable</option>
    </select>
<input type="button" onclick="writetext()" value="write">
    <textarea id="text"></textarea>

JS

function writetext(){
var mytext = $('#text');

var box_1 = $("#box1").val();
if (box_1.indexOf('Complete') > -1){
ctext += "\n- Stage I\n- "+box_1+"\n";}
if ((box_1.indexOf('two one') > -1) || (box_1.indexOf('two two') > -1) || (box_1.indexOf('Intra') > -1)) {
ctext += "\n- Stage II\n- "+box_1.join("\n- ")+"\n";}
if ((box_1.indexOf('Macro two') > -1) || (box_1.indexOf('Macro one') > -1)) {
ctext += "\n- Stage III\n- "+box_14.join("\n- ")+"\n";}

else {ctext += "\n- "+box_1+"\n";}
mytext.value = ctext;        
}

更新 虽然下面的答案在此示例中有效，但似乎应该有一种更简单的方法来在 if 语句中查询从多个选择派生的数组。如果选择了两个或多个项目，有没有办法询问是否在多个选择中选择了特定选项？

更新#2感谢@andrew 的提示。我想我偶然发现了我正在寻找的东西。选择的答案不太优雅，但使用以下方法完成手头的任务：

$.inArray('string to challenge', variable containing object array of selectbox) > -1

所以，在我的例子中，如果我想触发一些代码，如果说“Intra one”在选择中，我可以这样做：

$.inArray('Intra one', box_1) > -1

我不确定是否可以使用正则表达式来查看字符串的某些部分是否存在，但我确信可能有一种方法可以做到这一点。

4

1 回答 1

0

我做了一些修复你的jsFiddle的一个分支。您在 HTML 和 javascript 中有一些语法错误。

像这样更改按钮 HTML：

<input type="button" value="write" />

已编辑...一种更可靠的方法：

    $(function() {

    function write() {
        var select = $('#box1');
        var ctext = '';

        select.find('optgroup').each(function() {
            var el = $(this);
            if (el.find('option:selected').length) {
                ctext += "\n- " + el.attr('label') + "\n- ";
                var items = [];
                el.find('option:selected').each(function() {
                    items.push($(this).text());
                });
                ctext += items.join(',') + "\n";
            }
        });

        $('#text').val(ctext);
        return false;
    }

    $('input').click(write);

});
于 2013-08-30T22:33:54.247 回答