如何为多个选择框选择运行if / else条件?

时间:2013-08-30 22:10:07

标签: jquery if-statement drop-down-menu

我正在尝试使用if / else条件执行一个函数,具体取决于用户在selectbox中的选择。选择框允许多个选择,选项由optgroups分隔。

我已经尝试了选择.selectedIndex,.option []和现在的.indexOf的if条件 - 但似乎没有任何东西符合我的预期逻辑。我正在学习javascript / jQuery,请原谅任何新手faux-pas!

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

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

所以,在我的例子中,如果我想解雇一些代码,如果说'内部一个'是选择之一,我可以这样做:

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

我不确定是否可以使用正则表达式来查看字符串的某些部分是否存在,但我确信可能有办法实现此目的。

1 个答案:

答案 0 :(得分: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);

});