Question

我在下拉表单中传递此信息时遇到了一些问题。

首先，我有一个下拉列表，当您选择A，B或C时，DIV会显示另一个下拉菜单，A，B或C.

这些DIV的下拉列表都是3个命名产品。

我在这里有想要显示DIV的代码：

<script>
    function namedata(data) {
        if (data == 'AA') {
            $('#divaa').css('display', 'block');
            $('#divb').css('display', 'none');
            $('#divc').css('display', 'none');
            $('#diva').css('display', 'none');

        }
        if (data == 'A') {
            $('#diva').css('display', 'block');
            $('#divb').css('display', 'none');
            $('#divc').css('display', 'none');
            $('#divaa').css('display', 'none');


        }
        else if (data == 'B') {
            $('#divb').css('display', 'block');
            $('#diva').css('display', 'none');
            $('#divc').css('display', 'none');
            $('#divaa').css('display', 'none');

        }
        else if (data == 'C') {
            $('#divc').css('display', 'block');
            $('#diva').css('display', 'none');
            $('#divb').css('display', 'none');
            $('#divaa').css('display', 'none');

        }
    }
</script>

在这里，我有所有的下拉菜单

<select name="name" onchange="return namedata(this.value);">
    <option value="AA">PLEASE CHOOSE</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Lorem ipsum..<br>
<div style="display: block;" id="divaa">
    Choose in the first dropdown first
</div>

<div style="display: none;" id="diva">
    <select name="produkt" id="field1">
        <option value="11">AA</option>
        <option value="12">AB</option>
        <option value="12">AC</option>
    </select>
</div>

<div style="display: none;" id="divb">
    <select name="produkt" id="field2">
        <option value="31">BA</option>
        <option value="32">BB</option>
    </select>
</div>

<div style="display: none;" id="divc">
    <select name="produkt" id="field3">
        <option value="21">CA</option>
        <option value="22">CB</option>
    </select>
</div>

我希望使用POST从其中一个选择的下拉列表中获取值到下一页。

但结果是我总是获得价值21，CA领域。

问题是什么？

Answer 1

是的，that happends when you dont disabled a field and the value its submitted to the server。

因此，除了display=none之外，您还必须禁用这些字段。

所以试试这个：

function namedata(data) {
        if (data == 'AA') {
            $('#divaa').css('display', 'block');
            $('#divb').css('display', 'none').prop("disabled",true);
            $('#divc').css('display', 'none').prop("disabled",true);
            $('#diva').css('display', 'none').prop("disabled",true);

        }
        if (data == 'A') {
            $('#diva').css('display', 'block');
            $('#divb').css('display', 'none').prop("disabled",true);
            $('#divc').css('display', 'none').prop("disabled",true);
            $('#divaa').css('display', 'none').prop("disabled",true);


        }
        else if (data == 'B') {
            $('#divb').css('display', 'block');
            $('#diva').css('display', 'none').prop("disabled",true);
            $('#divc').css('display', 'none').prop("disabled",true);
            $('#divaa').css('display', 'none').prop("disabled",true);

        }
        else if (data == 'C') {
            $('#divc').css('display', 'block');
            $('#diva').css('display', 'none').prop("disabled",true);
            $('#divb').css('display', 'none').prop("disabled",true);
            $('#divaa').css('display', 'none').prop("disabled",true);

        }
    }

Answer 2

不仅要隐藏带有sub handler { my ($r)=@_; @{$r->pnotes}{qw/etext ect/}=("sorry, no access\n", 'text/plain; charset=my-characters'); $r->custom_response( 403, "/-/error" ); return 403; }的div，还要禁用那些不活动的div中的选择。这将阻止他们的价值被发送：

display: none

你可以在这里看到一个演示：http://jsfiddle.net/srnzb3cy/（检查控制台以查看将要发送的值）

Answer 3

请使用jquerys选择器的强大功能。

您不需要所有这些代码行。

试试这个：

$('#diva, #divb, #divc, #divaa').not('#div' + data.toLowerCase()).css('display', 'none').prop("disabled",true);
$('#div' + data.toLowerCase()).css('display', 'block').prop("disabled",false);

第一行将选择所有div并取消选择必须显示的div。第二行只会选择要显示的div

Answer 4

也许您想要使用您提供的资源获得答案，但如果不是这种情况，我建议您使用Chained选择插件（jQuery）

它会对你有所帮助！

我可以给你看一个例子，试试这个：

<select name="name" id="father">
    <option value="AA">PLEASE CHOOSE</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

So much easier :)<br>
<div style="display: block;" id="divaa">
    Choose in the first dropdown first
</div>

<div style="display: none;" id="divaa">
    <select name="produkt" id="field1">
        <option value="11" class="A">AA</option>
        <option value="12" class="A">AB</option>
        <option value="12" class="A">AC</option>
        <option value="31" class="B">BA</option>
        <option value="32" class="B">BB</option>
        <option value="21" class="C">CA</option>
        <option value="22" class="C">CB</option>
    </select>
</div>

你唯一需要的是：

$("#field1").chained("#father");

你可能需要这个：

https://github.com/tuupola/jquery_chained/blob/master/jquery.chained.min.js

祝你好运！

这是项目的链接以获取更多信息：

http://www.appelsiini.net/projects/chained

如何传递此POST数据？

4 个答案: