我有两个选择表单域。一个是“price_from”,另一个是“price_to”。问题是,我想阻止用户选择例如price_from“10000”和price_to“1000”,所以基本上我必须找到一些JavaScript函数,它基于“price_to”值向前设置“price_to”字段值。即:如果我选择price_from =“3000”,price_from字段将显示“4000”的值。反之亦然。如果有人再次更改“price_to”或“price_from”字段。Javascript(jQuery)两个选择价格从/到范围
回答
试试这个:
HTML:
<select id="from1" relatedTo="to1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select id="to1" relatedTo="from1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<br/>
<select id="from2" relatedTo="to2">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
<select id="to2" relatedTo="from2">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
的JavaScript:
// function to valide two selects
function validateSelects(fromSelector, toSelector) {
// registering the change event to the "to" select
$(toSelector).change(function() {
var fromSelector = "#" + $(this).attr("relatedTo");
var toSelector = "#" + $(this).attr("id");
// compares the value of the selected item with the from select
if ($(this).val() > $(fromSelector).val()) {
// selects the value of the from select
$(this).val($(fromSelector).val());
}
});
// puts the gui in a valid state
$(fromSelector).change(function() {
var fromSelector = "#" + $(this).attr("id");
var toSelector = "#" + $(this).attr("relatedTo");
// compares if the value of this field is less than the value of the "to" select
if ($(this).val() < $(toSelector).val()) {
// if so, change the value of the "to" select
$(toSelector).val($(this).val());
}
});
}
validateSelects("#from1", "#to1");
validateSelects("#from2", "#to2");
的jsfiddle:http://jsfiddle.net/davidbuzatto/YNL6R/
编辑:我在每个选择插入一个自定义属性来表示它们绑定的选择。
+1 - 努力。 – undefined 2012-07-23 19:29:30
@Raminson:tks!我更新了答案,现在更好:) – davidbuzatto 2012-07-23 19:35:00
谢谢你,但它工作不正常。这真的很奇怪:)。例如,如果您从“10000”中选择价格并选择价格到“9000”就没关系,但是如果您选择价格到“1000”,那么它不是:)。请在我的循环中尝试下一个答案 – 2012-07-23 19:43:23
这是html代码。 @davidbuzatto你的代码正在工作,但尝试选择price_from 10000和价格1000你会看到。
<select name="pricesFrom" id="pricefrom"><option value="0" selected>Any</option><option value="500">500.00</option><option value="1000">1,000.00</option><option value="2000">2,000.00</option><option value="3000">3,000.00</option><option value="4000">4,000.00</option><option value="5000">5,000.00</option><option value="6000">6,000.00</option><option value="7000">7,000.00</option><option value="8000">8,000.00</option><option value="9000">9,000.00</option><option value="10000">10,000.00</option><option value="11000">11,000.00</option><option value="12000">12,000.00</option><option value="13000">13,000.00</option><option value="14000">14,000.00</option><option value="15000">15,000.00</option><option value="16000">16,000.00</option><option value="17000">17,000.00</option><option value="18000">18,000.00</option><option value="19000">19,000.00</option><option value="20000">20,000.00</option></select></label><label>Price to
<select name="pricesTo" id="priceto"><option value="0" selected>Any</option><option value="500">500.00</option><option value="1000">1,000.00</option><option value="2000">2,000.00</option><option value="3000">3,000.00</option><option value="4000">4,000.00</option><option value="5000">5,000.00</option><option value="6000">6,000.00</option><option value="7000">7,000.00</option><option value="8000">8,000.00</option><option value="9000">9,000.00</option><option value="10000">10,000.00</option><option value="11000">11,000.00</option><option value="12000">12,000.00</option><option value="13000">13,000.00</option><option value="14000">14,000.00</option><option value="15000">15,000.00</option><option value="16000">16,000.00</option><option value="17000">17,000.00</option><option value="18000">18,000.00</option><option value="19000">19,000.00</option><option value="20000">20,000.00</option></select>
尝试更改后的代码。当你的问题有新的内容时,只需更新原始内容即可?这些评论用于简要讨论,而不是补充问题;) – davidbuzatto 2012-07-23 20:07:56
- 1. 算法来选择价格范围
- 2. Calcuate价格范围在Javascript
- 3. 如何选择使用jQuery(移动)的价格范围
- 4. 选择从范围
- 5. 选择两个字段的范围
- 6. 范围选择器与javascript
- 7. javascript选择/范围坐标
- 8. jQuery从范围内选择文本
- 9. 选择以下范围jquery
- 10. 选择选项作为进度条和价格范围
- 11. Mysql ...价格范围内的价格范围?
- 12. Javascript选择更改价格
- 13. 选择从范围功能
- 14. 选择价格在查询范围之间
- 15. 选择多种货币的价格范围
- 16. 从一个范围中选择数字
- 17. JQuery,按用户选择筛选?范围?
- 18. 如何使用jQuery中的datepicker从两个日期范围中选择?
- 19. 使用jQuery选择器获取表格单元格的范围
- 20. 范围价格计算
- 21. 组按价格范围
- 22. Mysql日期范围价格
- 23. 价格范围问题
- 24. 标出价格范围Schema.org
- 25. 无法从jquery datepicker日期范围选择器中选择一个日期范围在Selenium JAVA
- 26. PostgreSQL多个日期范围的价格
- 27. 如何从价格范围滑块读取值(jquery)
- 28. 在JavaScript IE8中设置选择范围
- 29. jq:选择范围
- 30. 选择由范围
你在用什么HTML?你可以发布你已经得到的[JS小提琴](http://jsfiddle.net/),[JS斌](http://jsbin.com/)或类似的演示。而且,而不是两个链接的滑块,使用一个范围滑块不会更容易吗? – 2012-07-23 19:17:03
我在一个例子中工作。稍等片刻...... – davidbuzatto 2012-07-23 19:18:41
你的代码在哪里? – Sparky 2012-07-23 19:31:06