hiding options of select by id in jquery

Question

I wanna hide or show my options in a select when a options in another select being choose. I find this jquery for my problem jQuery show/hide options from one select drop down, when option on other select dropdown is slected

but I want to it works by option id instead option value. I changed this jquery like below for my project but it doesn't work like when it works with value. what should I do?

<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>

thanks for ur help;)

Answer 1

Try using this code:

$(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()
  })
})

Demo

 $(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() }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>