从选定的 optgroup 中获取值并将其存储在 Jquery 变量中

Question

这就是我想要实现的目标。我有 3 个 optgroups 选择，这 3 个选择具有相同的标签 name="DataEntered" 我需要将所选选项传递给 Jquery 变量以提交该值而不刷新表单。几乎一切正常，我只是遇到了 2 个问题。

1- 此 Jquery 函数仅在第一个选择选项组中的一个选项被选中时才取值，对其余 2 个选择不起作用，即使它们具有相同的标签名称

2- 一旦第一个选择的值被传递，我需要重置该选择，因为在第二次提交中仍然传递了第一个选择的值。

jquery函数：

DataEntered:$('select[name=DataEntered]').val()

HTML 选择：

<select  class="DropDown" Name="DataEntered">
<optgroup label="Customer Adjustment">
<option value="Agent called to make a Turn on/off">Turn on/off</option>
<option value="Agent called to make a credit Change">Credit Change</option>
<option value="Agent called to make a Temp Cred Change ">Temp Cred Change</option>
<option value="Agent called to Open New Customer">Open New Customer</option>
<option value="Agent called for other reason">Other</option>
</optgroup>

<optgroup label="Product Question">
<option value="Agent called for Question1">Question1</option>
<option value="Agent called  for Question2">Question2</option>
<option value="Agent called for Question3">Question3</option>
<option value="Agent called for Question4">Question4</option>
<option value="Agent called for Other Question">Other</option>
</optgroup>
</select>


<select  class="DropDown"  Name="DataEntered">
<optgroup label="Account Adjustment">
<option value="Acc Adj-Change PW">Change PW</option>
<option value="Acc Adj-More Credit">More Credit</option>
<option value="Acc Adj-Turn off account">Turn off account</option>
</optgroup>

<optgroup label="Product Question">
<option value="Agent called for Question1">Question1</option>
<option value="Agent called  for Question2">Question2</option>
<option value="Agent called for Question3">Question3</option>
<option value="Agent called for Question4">Question4</option>
<option value="Agent called for Other Question">Other</option>
</optgroup>
</select>


<select  class="DropDown"  Name="DataEntered">
<option value="Runner-Check item it">Check item it</option>
<option value="Runner-Check item it">Receive Work</option>
<option value="Runner-Check item it">Confirm/Ask for information</option>
<option value="Runner-Check item it">Problem</option>
<option value="Runner-Check item it">Other</option>
</select>

Answer 1

您应该使用不同的名称（DataEntered1、DataEntered2、DataEntered3）或通过 id 示例选择它们：

DataEntered:$('#dataenterd1').val()
<select id='dataenterd1' class="DropDown"  Name="DataEntered">

Answer 2

通过赋予相同的名称，DataEntered 现在已成为一个数组。您可以像这样访问每个选择的值：

DataEntered:$('select[name=DataEntered]');
Selected1: $(DataEntered[0]).val();
Selected2: $(DataEntered[1]).val();
Selected3: $(DataEntered[2]).val();

然而，这不是一个好的设计。您应该为每个 SELECT 提供自己的名称或类或 ID。

Answer 3

更简单的方法，可以根据需要进行尽可能多的选择：

<script type="text/javascript">
    function getSelectValues(){
        $('select[name="DataEntered"]').each(function(){
            console.log($(this).val()); // here you can manage the value however you want to
        });
    };
</script>

Answer 4

    $('select').change(function () {
        var opt = $(this).find(':selected');
        var sel = opt.val();
        var og = opt.closest('optgroup').attr('label');
        alert(sel);
        alert(og);
        $(this).find(':selected').text(sel + '-' + og);
    });