[英]Replace 'value' with 'data-filter' in example
guys, here is an example of dependent select options. 伙计们,这是一个依赖选择选项的例子。
$('#city').change(function() { $('#street option').hide(); $('#street option[value="' + $(this).val() + '"]').show(); // add this code to select 1'st of streets automaticaly // when city changed if ($('#street option[value="' + $(this).val() + '"]').length) { $('#street option[value="' + $(this).val() + '"]').first().prop('selected', true); } // in case if there's no corresponding street: // reset select element else { $('#street').val(''); }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="city" name="city"> <option value="0">Select City</option> <option value="1">Manchester</option> <option value="2">Leicester</option> <option value="3">Londra</option> </select> <select id="street" name="street"> <option value="0">Select Street</option> <option value="1">Street 1</option> <option value="1">Street 2</option> <option value="1">Street 3</option> <option value="2">Street 4</option> <option value="2">Street 5</option> <option value="2">Street 6</option> <option value="1200">Street 7</option> <option value="1200">Street 8</option> <option value="1200">Street 9</option> </select>
Everything is fine with, but in need to replace value-based filtering with data attributes based, like so: 一切都很好,但需要用基于数据的属性替换基于值的过滤,如下所示:
<option value="1">Street 1</option> => <option data-filter="1" value="">Street 1</option>
Your help is a highly appreciated. 非常感谢您的帮助。
Your need to use 您需要使用
$(this).find(":selected").attr('data-filter')
and 和
$(this).find(":selected").attr('data-filter') + '"]').first().prop('selected', true);
So instead of targeting the 'value' attribute you switch to the 'data-attributeName'. 因此,您无需切换到'value'属性,而是切换到'data-attributeName'。
Update: Here is a working example based on your pen. 更新:这是一个基于您的笔的有效示例 。
Is that what you wish? 那是你想要的吗?
To use data-filter
instead of value
? 要使用data-filter
而不是value
?
Ok, the twist here is that you have to look for the selected option
... Since the value isn't tied to the select
anymore. 好吧,这里的转折是,你必须寻找所选option
...由于该值不依赖于select
了。 That's all. 就这样。
$('#city').change(function() { var cityFilter = $(this).find("option:selected").data("filter"); $('#street option').hide(); $('#street option[data-filter="' + cityFilter + '"]').show(); // add this code to select 1'st of streets automaticaly // when city changed if ($('#street option[data-filter="' + cityFilter + '"]').length) { $('#street option[data-filter="' + cityFilter + '"]').first().prop('selected', true); } // in case if there's no corresponding street: // reset select element else { $('#street').val(''); }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="city" name="city"> <option value="" data-filter="0">Select City</option> <option value="" data-filter="1">Manchester</option> <option value="" data-filter="2">Leicester</option> <option value="" data-filter="3">Londra</option> </select> <select id="street" name="street"> <option value="" data-filter="0">Select Street</option> <option value="" data-filter="1">Street 1</option> <option value="" data-filter="1">Street 2</option> <option value="" data-filter="1">Street 3</option> <option value="" data-filter="2">Street 4</option> <option value="" data-filter="2">Street 5</option> <option value="" data-filter="2">Street 6</option> <option value="" data-filter="1200">Street 7</option> <option value="" data-filter="1200">Street 8</option> <option value="" data-filter="1200">Street 9</option> </select>
I also "reduced" the amount of jQuery lookups... using the cityFilter
variable. 我还使用cityFilter
变量“减少”了jQuery查找的数量。
Feel free for questions. 随时提出问题。 ;) ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.