0

I am creating a jQuery Mobile page that has two select menu's, one is multiple choice, the other is single choice. The multiple choice menu is set to trigger a handler function which loops though the selected values in the menu. The problem is that every time the handler is triggered, some how the first value from the single choice menu get's included in the loop (this can be seen if you implement the code below).

If any one can suggest a solution to this issue it would be greatly appreciated.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
    />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#multipleChoiceMenu").on("change", {
                testdata: "test"
            }, multipleChoiceSelectHandler);

            function multipleChoiceSelectHandler(e) {
                navigationFilterGate = 0;
                $("select option:selected").each(function (i) {
                    var optionValue = $(this).val();
                    alert("loop " + i + " val " + optionValue);
                });
            };
        });
    </script>
</head>

<body>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <label for="select-choice-custom">Single Choice Menu</label>
            <select select name="singleChoiceMenu" id="singleChoiceMenu"
            data-native-menu="false">
                <option value="Menu1 Value1">Menu1 Value1</option>
                <option value="Menu1 Value2">Menu1 Value2</option>
                <option value="Menu1 Value3">Menu1 Value3</option>
            </select>
            <label for="select-choice-0" class="select">Multiple Choice Menu</label>
            <select name="multipleChoiceMenu" id="multipleChoiceMenu"
            multiple="multiple" data-native-menu="false">
                <option value="Menu2 Value1">Menu2 Value1</option>
                <option value="Menu2 Value2">Menu2 Value2</option>
                <option value="Menu2 Value3">Menu2 Value3</option>
            </select>
        </div>
    </div>
</body>

Ben Pearce
  • 6,884
  • 18
  • 70
  • 127

1 Answers1

0

It's because the selector you are using is too general.

Where you use $("select option:selected").each(function (i)..., you are telling jQuery to select "every selected option within a select element", which of course includes the selected option in the single-choice menu.

Try changing that to one of the following (either should work fine and I'm not sure which is faster):

$("select[name=multipleChoiceMenu] option:selected").each(function (i)...
$("#multipleChoiceMenu option:selected").each(function (i)...

The first version selects only the menu with the name multipleChoiceMenu and the second selects by id. Both versions should ignore the other menu, which is what you want.