javascript - 在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>
感谢您的帮助;)
解决方案
尝试使用此代码:
$(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>
推荐阅读
- path - 如何使用 Graphhopper 获得两个节点之间的所有可能路径
- git - git clone --recurse-submodules 记录子模块的绝对路径
- javascript - 从 html5 画布生成的图像无法保存在 chrome 中
- python - 模块对象在 pygame 中不可调用
- javascript - Firebase 错误:代码:“auth/user-not-found”
- typescript - TypeScript Fetch response.Json
- 预期 0 类型参数,但得到 1 - c# - 数据绑定时防止数据网格中的重复
- reactjs - 我在我的 jsfiddle 中收到错误未关闭的正则表达式
- android - 在片段中动态生成的 RadioGroup 中获取选中按钮
- redis - 无法加载密钥:redis 服务器不支持扫描命令