首页 > 解决方案 > 在jquery中隐藏按id选择的选项

问题描述

我想在选择另一个选择中选择的选项中隐藏或显示我的选项。我为我的问题找到了这个 jquery jQuery show/hide options from one select dropdown, when option on other select dropdown

但我希望它通过选项 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>

感谢您的帮助;)

标签: javascripthtmljquerydrop-down-menu

解决方案


尝试使用此代码:

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

演示

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


推荐阅读