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

例如，我有三个选择框

<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.
B我已经编写了自己的代码来处理这个问题。下面是一个工作示例：


我
二,
三,
A.
B
C
A.
B
C

组合：

预期隐藏：
$（'addButton'）。在（'click'，addButton'单击）上；
函数addButtonClicked（事件）{
var cat1=$（“#cat_1选项：选定”）.val（）；
var cat2=$（“#cat_2选项：选定”）.val（）；
var cat3=$（“#cat_3选项：选定”）.val（）；
如果（$（“#combContainer:包含（“[”+cat1+”、“+cat2+”、“+cat3+”））。长度==0）{
$（“#combContainer”）.append（“[”+cat1+”、“+cat2+”、“+cat3+”]remove”）；
}
var-arr=[]；
$（'.comb'）。每个（函数（索引，元素）{
arr.push（$（this.text（））；
$（'#预期'）。文本（arr.join（''）；
});
$（“#combContainer”）。在（“单击”，“#combDel”，函数（）{
var text=$（this.closest（“div”）.children（“.comb”）.text（）；
if（$（'#combContainer:contains（“['+text+']”））。长度==0）{
$（this）.closest（“div”）.remove（）；
var expectedText=$（“#预期”）.text（）；
var newExpectedText=expectedText.replace（文本“”）；
$（“#预期”）.text（newExpectedText）；
}
});
}
我已经编写了自己的代码来处理这个问题。下面是一个工作示例：


我
二,
三,
A.
B
C
A.
B
C

组合：

预期隐藏：
$（'addButton'）。在（'click'，addButton'单击）上；
函数addButtonClicked（事件）{
var cat1=$（“#cat_1选项：选定”）.val（）；
var cat2=$（“#cat_2选项：选定”）.val（）；
var cat3=$（“#cat_3选项：选定”）.val（）；
如果（$（“#combContainer:包含（“[”+cat1+”、“+cat2+”、“+cat3+”））。长度==0）{
$（“#combContainer”）.append（“[”+cat1+”、“+cat2+”、“+cat3+”]remove”）；
}
var-arr=[]；
$（'.comb'）。每个（函数（索引，元素）{
arr.push（$（this.text（））；
$（'#预期'）。文本（arr.join（''）；
});
$（“#combContainer”）。在（“单击”，“#combDel”，函数（）{
var text=$（this.closest（“div”）.children（“.comb”）.text（）；
if（$（'#combContainer:contains（“['+text+']”））。长度==0）{
$（this）.closest（“div”）.remove（）；
var expectedText=$（“#预期”）.text（）；
var newExpectedText=expectedText.replace（文本“”）；
$（“#预期”）.text（newExpectedText）；
}
});
}
您尝试过什么吗？社区不会为您编写完整的解决方案我不需要完整的解决方案。我需要指引。问题是我不知道如何正确地做到这一点。我看到了其他不相关的主题，当人们编码到隐藏字段json值，然后在php中解码时，还有一些二维数组，但这些都是完全不相关的主题。我想听听更多的方法/一般指导方针如何处理这个问题。你试过什么吗？社区不会为您编写完整的解决方案我不需要完整的解决方案。我需要指引。问题是我不知道如何正确地做到这一点。我看到了其他不相关的主题，当人们编码到隐藏字段json值，然后在php中解码时，还有一些二维数组，但这些都是完全不相关的主题。我想听听更多的方法/一般准则，我如何处理这个问题。
<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);
        }
    });

}