添加/删除选择框不给值

时间:2013-05-04 18:43:14

标签: php javascript jquery html codeigniter

(问题在这篇文章的底部)

您好,我正在关注此tutorial

我总共制作了3个盒子,其中1个包含所有值,2个用于分隔值。

如图所示:

enter image description here

这是我的Jquery:

<script type="text/javascript">
        $(document).ready(function() {
        $("#and").click(function() {
            $("#totalselect option:selected").each(function() {
            $("#select-and").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
            $(this).remove();
            });
        });
        $("#removeand").click(function() {
            $("#select-and option:selected").each(function() {
            $("#totalselect").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
            $(this).remove();
            });
        });
        $("#or").click(function() {
            $("#totalselect option:selected").each(function() {
            $("#select-or").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
            $(this).remove();
            });
        });
        $("#removeor").click(function() {
            $("#select-or option:selected").each(function() {
            $("#totalselect").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
            $(this).remove();
            });
        });
        });
    </script>

这是我的HTML:

<div id="mass_options">
        <a href="JavaScript:void(0);" id="and">And</a>
        <a href="JavaScript:void(0);" id="or">Or</a>
        <select name="totalselect[]" id="totalselect" multiple size="5">
            <?php foreach ($reasons as $r) { ?>
                <option value="reason_<?php echo $r['reason_id'] ?>">Reason: <?php echo $r['reason'] ?></option>
            <?php } ?>
            <?php foreach ($options5 as $key => $value) { ?>
                <option value="status_<?php echo $key ?>">Session Status: <?php echo $value ?></option>
            <?php } ?>
            <?php foreach ($info as $key => $value) { ?>
                <option value="action_<?php echo $key ?>">Action: <?php echo $value ?></option>
            <?php } ?>
        </select>
        </div>

        <select name="and" id="select-and" multiple size="5" class="selectnew">
        </select>
        <select name="or" id="select-or" multiple size="5" class="selectnew">
        </select>
        <br>
        <br>
        <a href="JavaScript:void(0);" id="removeand">Remove And</a>
        <a href="JavaScript:void(0);" id="removeor">Remove Or</a>

问题

当我单击Next时,它会将我发送到一个页面,该页面只执行所有post值的var_dump,我注意到的是我添加到“和”框中的内容或者“or box”不在var_dump中作为一种价值。我可以提交它的唯一方法(当我点击下一步时)实际上突出显示“和框”或“或框”中的值。我怎么能这样,如果它在“和框”或“或框”中自动选择我提交给我的脚本而不必突出显示它们?

我之所以这样做是因为我可以动态地构建一个Where子句为“AND”或“OR”的查询,这样我就可以让学生发送更多动态,而不仅仅是剪切和干燥。

任何帮助都会很棒。

1 个答案:

答案 0 :(得分:3)

在原生表单提交中,您必须“突出显示”您的选项。您知道只有选定的选项会在帖子中发送。您可以在发送数据之前使用jQuery选择它们:

$("form *:submit").click(function() { /* choose a better selector for submit button */
    $("#select-and options, #select-or options").attr("selected", true);
    $(this).parents("form:first").submit();
});

没有“自动选择”的另一种选择是使用AJAX发送帖子。通过这种方式,您可以准备发送数据。

..或编辑你的jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $("#and").click(function() {
            $("#totalselect option:selected").appendTo("#select-and");
        });
        $("#or").click(function() {
            $("#totalselect option:selected").appendTo("#select-or");
        });
        $("#removeand").click(function() {
            $("#select-and option:selected")
                .removeAttr("selected")
                .appendTo("#totalselect");
        });
        $("#removeor").click(function() {
            $("#select-or option:selected")
                .removeAttr("selected")
                .appendTo("#totalselect");
        });
    });
    </script>