如何使用js或jquery将选项组合传递到PHP表单

How to pass options combinations to PHP form using js or jquery

本文关键字：PHP 表单 组合 选项 js 何使用 jquery      更新时间：2023-09-26

例如，我有三个选择框。

<select name="cat-1" id="cat-1">
  <option value="0">A</option>
  <option value="1">B</option
</select>
<select name="cat-2" id="cat-2"> 
  <option value="0">AA</option>
  <option value="1">BB</option
</select>
<select name="cat-3" id="cat-3">
  <option value="0">AAA</option>
  <option value="1">BBB</option
</select>
<input type="submit" value="Add">

如果我选择选项，例如A BB AAA并按ADD，我希望这个组合在添加按钮下显示为文本，如：A BB AAA (X) x-以取消这样的组合。我想加上最多3个组合，可以取消任何组合提交表单后，我想传递这样的组合值在这种情况下，我想数组[0，1，0]会很好。选项值不能单独提交，因为cat-2和cat-3是使用ajax动态填充的——cat-3依赖于cat-2，cat-2依赖于cat-1，所以可以有很多组合。

我正在使用select2(http://select2.github.io/examples.html)。如果我能以类似"多选框"的风格返回组合，那将是完美的（见上面的链接）。

知道我从哪里开始吗？我不知道如何在未来以正确的方式实现这一功能，例如，点击组合将选择框设置为组合值等。

我想数据库的最终输入将生成数组，如[[0,1,0]，[0,0,0]，[1,0,3]，…]在隐藏的领域？

我已经编写了自己的代码来处理这个问题。以下是工作示例：http://jsfiddle.net/s2arvdck/13/

<select name="cat_1" id="cat_1">
    <option value="0">I</option>
    <option value="1">II</option>
    <option value="2">III</option>
</select>
<select name="cat_2" id="cat_2">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
</select>
<select name="cat_3" id="cat_3">
    <option value="0">a</option>
    <option value="1">b</option>
    <option value="2">c</option>
</select>
<input type="button" id="addButton" value="Add">
<br />Combinations: <span id="combContainer"></span>
<br />Expected hidden: <span id="expected"></span>
$('#addButton').on('click', addButtonClicked);
function addButtonClicked(event) {
    var cat1 = $('#cat_1 option:selected').val();
    var cat2 = $('#cat_2 option:selected').val();
    var cat3 = $('#cat_3 option:selected').val();
    if ($('#combContainer:contains("[' + cat1 + ', ' + cat2 + ', ' + cat3 + ']")').length == 0) {
        $('#combContainer').append('<div><span class="comb">[' + cat1 + ', ' + cat2 + ', ' + cat3 + ']</span> <span id="combDel">remove</span></div>');
    }
    var arr = [];
    $('.comb').each(function (index, elem) {
        arr.push($(this).text());
        $('#expected').text(arr.join(''));
    });
    $("#combContainer").on("click", "#combDel", function () {
        var text = $(this).closest("div").children(".comb").text();
        if ($('#combContainer:contains("[' + text + ']")').length == 0) {
            $(this).closest("div").remove();
            var expectedText = $("#expected").text();
            var newExpectedText = expectedText.replace(text, '');
            $("#expected").text(newExpectedText);
        }
    });
}
相关文章：