javascript - 如何使用 JavaScript 从单独的选择列表中检索 append 值

Question

我有一个脚本，可以 append 隐藏值以传递到表单。当我发布表单时，仅传递第一个列表值。我相信我需要以某种方式使第二个列表的名称唯一。

<script>
$(document).ready(function() {
$('#Color').change(function() {
$('.inputs').html('');
var $explodedVal = $(this).val().split('-');
$('.inputs').append('<input type="hidden" name="caseOpt" id="caseOpt"  value="' + $explodedVal[1]+'">');
});
});
</script>

这是第一个列表。

<label>Color</label>
<br>
<select name="Color" class="listOpt" id="Color" title="Color" >
<option value="None-0">Select Ring Size</option>
<option value="Red-1">Red</option>
<option value="Blue-2">Blue</option
</select>



<script>
$(function() {
$('#Size').change(function() {
$('.inputs').html('');
var $explodedVal2 = $(this).val().split('-');
var $explodedVal3 = $(this).val().split('-');

$('.inputs').append('<input type="hidden" name="colorOpt" id="colorOpt"  value="' + $explodedVal2[1]+'">');
$('.inputs').append('<input type="hidden" name="colorInc" id="colorInc" value="' + $explodedVal3[0]+'">');
});
});</script>

这是第二个列表

<label>Size</label>
<br>
<select name="Size" class="listOpt" id="Size" title="Size" >
<option value="None-0">Select Ring Size</option>
<option value="Large-1">Large</option>
<option value="Xlarge-2">Xlarge</option
</select>

Answer 1

为什么使用“None-0”这样的值？ “0”不应该好吗？

你可以有一个像这样的对象:

var data = {
    color: null,
    size: null
};

然后使用以下方式访问属性:

data[color] = 0;
data[size] = 1;

就您而言:

<label>Color</label>
<br>
<select name="Color" class="listOpt" id="Color" title="Color" >
    <option value="0">Select Ring Size</option>
    <option value="1">Red</option>
    <option value="2">Blue</option
</select>

<label>Size</label>
<br>
<select name="Size" class="listOpt" id="Size" title="Size" >
    <option value="0">Select Ring Size</option>
    <option value="1">Large</option>
    <option value="2">Xlarge</option
</select>       

<script>
    var data = {
        color: null,
        size: null
    };

    $(function() {
        $('#Size').change(function() {
            data[size] = $(this).val();
        });
        $('#Color').change(function() {
            data[color] = $(this).val();
        });
    });
</script>