0

と という 2 つのドロップダウンがあります。最初の選択に基づいて 2 番目のドロップダウン値を変更したいと思いますMin Price。Max Price

例を言う1st drop-down selection is 100 means, 2nd drop-down value should be greater than the 100, if it is 200 in 1st, value of 2nd should be greater than 200

jQueryまたはjsのアイデアはありますか?

4

5 に答える 5

7

私が考えることができる最も単純なもの（これにより、選択に戻ることができます。400を選択してから200を選択すると、すべてが機能します）

<select id='min'>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='300'>300</option>
<option value='400'>400</option>
</select>
<select id='max'>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='300'>300</option>
<option value='400'>400</option>
</select>​

var removed;

$('#min').change( function() {
    var value = this.value;
    $('#max').prepend(removed);
    var toKeep = $('#max option').filter( function( ) {
        return parseInt(this.value, 10) >= parseInt( value, 10);
    } );
    removed =  $('#max option').filter( function( ) {
        return parseInt(this.value, 10) < parseInt( value, 10);
    } );
    $('#max').html(toKeep);
});​

http://jsfiddle.net/NjLNF/2/

EDIt-コメントごとにparseInt（）を追加

于 2012-08-02T12:36:13.423 に答える
1

jqueryとchange関数を使用できます。最初のドロップダウンのIDがdrop1の場合、$（ "＃drop1"）。change（function（）{..関数をここに配置して2番目のドロップダウンにデータを入力します..

于 2012-08-02T12:36:18.170 に答える
0 
$('#first_dd').change(function(){
var dd_val=$(this).val();
var options = "";
$('#second_dd').html('');
for(var i=parseInt(dd_val+1);i<=END-LIMIT;i++)
{
$('#second_dd').append('<option value='+i+'>'+i+'</option>');
}
});

ブラウザでテストしていません。systexを検討し、ロジックに従ってください。

于 2012-08-02T12:35:56.257 に答える
0 
$(function () {
        $("#one").change(function (e) {
            $("#two").empty();

            var options =
            $("#one option").filter(function(e){
                return $(this).attr("value") > $("#one option:selected").val();
            }).clone();

            $("#two").append(options);
        });
    });
于 2012-08-02T12:36:15.077 に答える
0

最小価格ドロップダウンにリスナーを追加し、選択した最小価格ドロップダウンよりも大きい値が見つかるまで、最大価格ドロップダウンの値をループします。このようなもの

$('#minPrice').change(function(){
    var minVal = $('#minPrice option:selected').val();
     $('#maxPrice option').each(function(){
          if(minVal < $(this).val()){
             $(this).attr('selected', 'selected');
             return false;
          }
     });
});
于 2012-08-02T12:47:39.797 に答える