Javascript 在jquery中隐藏按id选择的选项

当选择另一个选择中的选项时，我想在选择中隐藏或显示我的选项。 我发现这个jquery解决了我的问题

但我希望它通过选项id而不是选项值工作。 我为我的项目更改了这个jquery，如下所示，但它的工作方式与使用值时不同。 我该怎么办

<div>       
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#secq").children('option:gt(0)').hide();
    $("#q").change(function() {
        $("#secq").children('option').hide();
        $("#secq").children("option[id^=" + $(this).id + "]").show()
    })
})


</script>

<form action="/Search" class="search-form" method="get">
    <fieldset>
        <select id="q" name="q" required><option value="">یک گزینه را انتخاب کنید</option>
            <option id="1" value="ویزای کشورهای قاره آمریکا"> ویزای کشورهای قاره آمریکا </option>
            <option id="2" value="ویزای کشورهای قاره اروپا"> ویزای کشورهای قاره اروپا </option>
            <option id="3" value="ویزا کشورهای همسایه"> ویزای کشورهای همسایه </option>
            <option id="4" value="ویزای کشورهای آسیا"> ویزای کشورهای آسیا </option>
            <option id="5" value="ویزای کشورهای آفریقا"> ویزای کشورهای آفریقا </option>
            <option id="6" value="ویزای کشورهای قاره اقیانوسیه"> ویزای کشورهای قاره اقیانوسیه </option>
        </select>

        <select id="secq" name="secq" required><option value="">یک گزینه را انتخاب کنید</option>
            <option id="1_1" value="ویزا توریستی کانادا"  >ویزای توریستی کانادا</option>
            <option id="1_2" value="ویزا تحصیلی کانادا"  >ویزای تحصیلی کانادا</option>
            <option id="1_3" value="ویزا دیدار از خانواده کانادا"  >ویزای دیدار از خانواده کانادا</option>
            <option id="1_4" value="ویزا توریستی آمریکا"  >ویزای توریستی آمریکا</option>
            <option id="1_5" value="ویزا تحصیلی آمریکا"  >ویزای تحصیلی آمریکا</option>
            <option id="1_6" value="ویزا دیدار از خانواده آمریکا"  >ویزای دیدار از خانواده آمریکا</option>
            <option id="1_7" value="ویزا مکزیک"  >ویزای مکزیک</option>
            <option id="1_8" value="ویزا کوبا"  >ویزای کوبا</option>
            <option id="1_9" value="ویزا برزیل"  >ویزای برزیل</option>
            <option id="2_1" value="ویزا شنگن کوتاه مدت">ویزای شنگن کوتاه مدت</option>
            <option id="2_2" value="ویزا شنگن بلند مدت">ویزای شنگن بلند مدت</option>
            <option id="2_3" value="ویزا اوکراین">ویزای اوکراین</option>
            <option id="2_4" value="ویزا بلغارستان">ویزای بلغارستان</option>
            <option id="2_5" value="ویزا کرواسی">ویزای کرواسی</option>
            <option id="2_6" value="ویزا شنگن از ایتالیا">ویزای شنگن از ایتالیا</option>
            <option id="2_7" value="ویزا شنگن از فرانسه">ویزای شنگن از فرانسه</option>
            <option id="2_8" value="ویزا شنگن از اسپاینا">ویزای شنگن از اسپاینا</option>
            <option id="2_9" value="ویزا شنگن از سوئیس">ویزا شنگن از سوئیس</option>
            <option id="2_10" value="ویزا شنگن از آلمان">ویزا شنگن از آلمان</option>
            <option id="2_11" value="ویزا شنگن از هلند">ویزا شنگن از هلند</option>
            <option id="2_12" value="ویزا شنگن از سوئد">ویزا شنگن از سوئد</option>
      </select>




        <input id="culture" name="culture" type="hidden" value="fa-IR">
        <button type="submit">جستجو</button>
    </fieldset>
</form>
    </div>

$（文档）.ready（函数（）{
$（“#secq”）.children（'option:gt（0）'）.hide（）；
$（“#q”）.更改（函数（）{
$（“#secq”）.children（'option'）.hide（）；
$（“#secq”）.children（“选项[id^=“+$（this.id+”]）”）.show（）
})
})
یک گزینه را انتخاب کنید
ویزای کشورهای قاره آمریکا 
ویزای کشورهای قاره اروپا 
ویزای کشورهای همسایه 
ویزای کشورهای آسیا 
ویزای کشورهای آفریقا 
ویزای کشورهای قاره اقیانوسیه 
یک گزینه را انتخاب کنید
ویزای توریستی کانادا
ویزای تحصیلی کانادا
ویزای دیدار از خانواده کانادا
ویزای توریستی آمریکا
ویزای تحصیلی آمریکا
ویزای دیدار از خانواده آمریکا
ویزای مکزیک
ویزای کوبا
ویزای برزیل
ویزای شنگن کوتاه مدت
ویزای شنگن بلند مدت
ویزای اوکراین
ویزای بلغارستان
ویزای کرواسی
ویزای شنگن از ایتالیا
ویزای شنگن از فرانسه
ویزای شنگن از اسپاینا
ویزا شنگن از سوئیس
ویزا شنگن از آلمان
ویزا شنگن از هلند
ویزا شنگن از سوئد
جستجو

谢谢你的帮助；）

尝试使用以下代码：

$(document).ready(function() {
  $("#secq").children('option:gt(0)').hide();
  $("#q").change(function() {
    $("#secq").children('option').hide();
    $("#secq").children("option[id^=" + $("option:selected",this).attr("id") + "]").show()
  })
})

演示

$（文档）.ready（函数（）{
$（“#secq”）.children（'option:gt（0）'）.hide（）；
$（“#q”）.更改（函数（）{
$（“#secq”）.children（'option'）.hide（）；
$（“#secq”）.children（“option[id^=”+$（“option:selected”，this.attr（“id”）+”]）.show（）
})
})

یک گزینه را انتخاب کنید
ویزای کشورهای قاره آمریکا 
ویزای کشورهای قاره اروپا 
ویزای کشورهای همسایه 
ویزای کشورهای آسیا 
ویزای کشورهای آفریقا 
ویزای کشورهای قاره اقیانوسیه 
یک گزینه را انتخاب کنید
ویزای توریستی کانادا
ویزای تحصیلی کانادا
ویزای دیدار از خانواده کانادا
ویزای توریستی آمریکا
ویزای تحصیلی آمریکا
ویزای دیدار از خانواده آمریکا
ویزای مکزیک
ویزای کوبا
ویزای برزیل
ویزای شنگن کوتاه مدت
ویزای شنگن بلند مدت
ویزای اوکراین
ویزای بلغارستان
ویزای کرواسی
ویزای شنگن از ایتالیا
ویزای شنگن از فرانسه
ویزای شنگن از اسپاینا
ویزا شنگن از سوئیس
ویزا شنگن از آلمان
ویزا شنگن از هلند
ویزا شنگن از سوئد
جستجو

请注意，您的html不正确。您没有正确关闭值，您正在执行

value=“您的选择
选项[id^=“+$（this）.id+”]”“
转换为选择所有选项标记，其id以该选择的值（^）开头。但是，第二次选择的所有ID都以
1
开头，因此，如果选择1，则仅选择所有选项；如果选择其他选项，则不选择任何选项。使用
$
而不是
^
来选择以value@CarstenLøvboAndersen我像链接中的查询那样做，这不是问题所在。@Lapskaus ID是示例。稍后我会添加像2_1和3_1这样的ID。现在，我想尝试一下，然后完成代码。但是你能解释更多关于
^
和使用
$
的问题吗。我不明白。@mohammad97mha这可能是问题所在，但您应该始终将正确的html放在代码中，因为它可能是某些问题的根源，而且您的
id=“3
缺少结尾
”