在选择框中选择加载选项时
On select loading options in a select box
我有一个包含州名称的主下拉列表,当我选择每个州名称时,我需要在一个选择框中显示城市名称,但选择框名称应该相同,因为当我给不同的具有相同名称的选择框时,数据不会存储在sql数据库中。因此,我需要在每个州选择上加载特定的城市名称。任意选项
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
<option value="City2"> City2</option>
<option value="City3"> City3</option>
<option value="City3"> City3</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
</select>
演示
您可以使用prop('disabled', true
/false);
来管理要选择的城市。你不应该有两个同名的选择,所以因为你在sql
中需要它们,我对它进行了修复。请注意,在你的帖子中,你错过了第一个<select>
,"城市3"出现了两次。
html
<select name="state" id="sel_state">
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
<option value="">Select Site</option>
<option value="City1">City1</option>
<option value="City2">City2</option>
<option value="City3">City3</option>
<option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
<option value="">Select Site</option>
<option value="City1">City1</option>
</select>
jQuery
$(function () {
$("#sel_state").change(function () {
var a = $("#sel_state option:selected").text();
if (a == 'CHENNAI') {
$('#GURGAON').prop('disabled', true);
$('#CHENNAI').prop('disabled', false);
$('#GURGAON').prop('name', 'site_ignored');
$('#CHENNAI').prop('name', 'site');
}
if (a == 'GURGAON') {
$('#CHENNAI').prop('disabled', true);
$('#GURGAON').prop('disabled', false);
$('#GURGAON').prop('name', 'site');
$('#CHENNAI').prop('name', 'site_ignored');
}
});
});
相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素