Select 由 class 名稱選擇的選項

Question

我有 2 個 select 框，其中第一個是所有用戶可選的，但在第二個選擇的選項中取決於第一個 select 框。 第一個選項框中的選定值與第二個 select 框中的選項 class 匹配，但值不同。 我想我需要類似的東西：

$('#territory').change(function() {
        if($(this).val() == 'EU')
        {
            $('#territory2').class('EU');
        }

我如何通過 class 名稱選擇 select 選項？ （可能有多個選項具有相同的 class 名稱，但它只需要 select 中的任何一個）。

     <select id="territory" name="territory"">
        <option value="EU">A</option>
        <option value="GB">B</option>
        <option value="ALL">C</option>
    </select>

    <select id="territory2" name="territory2">
        <option value="1" class="EU">A</option>
        <option value="2" class="GB">B</option>
        <option value="3" class="ALL">C</option>
        <option value="4" class="ALL">D</option>
    </select>

Answer 1

在<select>的value屬性上設置所需<option>元素的value屬性：

 const territory = document.getElementById("territory"), territory2 = document.getElementById("territory2"); territory.addEventListener("input", ev => { territory2.querySelector("."+territory.value).selected = true; });

 <select id="territory" name="territory"> <option value="EU">A</option> <option value="GB">B</option> <option value="ALL">C</option> </select> <select id="territory2" name="territory2"> <option value="1" class="EU">A</option> <option value="2" class="GB">B</option> <option value="3" class="ALL">C</option> <option value="4" class="ALL">D</option> </select>

請注意，這只會select 與 class 的第一個選項。

Answer 2

我推薦數據屬性：

 $('#territory').on("change", function() { const territory = $("option:selected", this).data("territory"); $("#territory2").val(territory) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="territory" name="territory"> <option value="" data-territory="0">Please select</option> <option value="EU" data-territory="1">A</option> <option value="GB" data-territory="2">B</option> <option value="ALL" data-territory="3">C</option> </select> <select id="territory2" name="territory2"> <option value="0">Please select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>