Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>javascript - onChange event on two select option - Stack Overflow

    javascript - onChange event on two select option - Stack Overflow

    matteradmin6PV0评论

    is it possible to change the limit the value of the dropdown2 when the dropdown1 changes? here is my code

    <!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">&pound;10,000</option>
<option value="20000">&pound;20,000</option>
<option value="30000">&pound;30,000</option>
<option value="40000">&pound;40,000</option>
<option value="50000">&pound;50,000</option>
<option value="60000">&pound;60,000</option>
<option value="70000">&pound;70,000</option>
<option value="80000">&pound;80,000</option>
<option value="90000">&pound;90,000</option>
<option value="100000">&pound;100,000</option>
<option value="110000">&pound;110,000</option>
<option value="120000">&pound;120,000</option>
<option value="130000">&pound;130,000</option>
<option value="140000">&pound;140,000</option>
<option value="150000">&pound;150,000</option>
<option value="150001">&pound;150,000+</option>
</select>

<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">&pound;10,000</option>
<option value="20000">&pound;20,000</option>
<option value="30000">&pound;30,000</option>
<option value="40000">&pound;40,000</option>
<option value="50000">&pound;50,000</option>
<option value="60000">&pound;60,000</option>
<option value="70000">&pound;70,000</option>
<option value="80000">&pound;80,000</option>
<option value="90000">&pound;90,000</option>
<option value="100000">&pound;100,000</option>
<option value="110000">&pound;110,000</option>
<option value="120000">&pound;120,000</option>
<option value="130000">&pound;130,000</option>
<option value="140000">&pound;140,000</option>
<option value="150000">&pound;150,000</option>
<option value="150001">&pound;150,000+</option>
</select>

    I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more. And I also want is if I change the value of dropdown1 to an amount, for example 30000, dropdown2 will show only the values that are greater that 30000 including the option any. Is there a way to do this in javascript or jQuery? sorry. I'm new at javascript and jQuery.. Thank you in advance!

    is it possible to change the limit the value of the dropdown2 when the dropdown1 changes? here is my code

    <!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">&pound;10,000</option>
<option value="20000">&pound;20,000</option>
<option value="30000">&pound;30,000</option>
<option value="40000">&pound;40,000</option>
<option value="50000">&pound;50,000</option>
<option value="60000">&pound;60,000</option>
<option value="70000">&pound;70,000</option>
<option value="80000">&pound;80,000</option>
<option value="90000">&pound;90,000</option>
<option value="100000">&pound;100,000</option>
<option value="110000">&pound;110,000</option>
<option value="120000">&pound;120,000</option>
<option value="130000">&pound;130,000</option>
<option value="140000">&pound;140,000</option>
<option value="150000">&pound;150,000</option>
<option value="150001">&pound;150,000+</option>
</select>

<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">&pound;10,000</option>
<option value="20000">&pound;20,000</option>
<option value="30000">&pound;30,000</option>
<option value="40000">&pound;40,000</option>
<option value="50000">&pound;50,000</option>
<option value="60000">&pound;60,000</option>
<option value="70000">&pound;70,000</option>
<option value="80000">&pound;80,000</option>
<option value="90000">&pound;90,000</option>
<option value="100000">&pound;100,000</option>
<option value="110000">&pound;110,000</option>
<option value="120000">&pound;120,000</option>
<option value="130000">&pound;130,000</option>
<option value="140000">&pound;140,000</option>
<option value="150000">&pound;150,000</option>
<option value="150001">&pound;150,000+</option>
</select>

    I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more. And I also want is if I change the value of dropdown1 to an amount, for example 30000, dropdown2 will show only the values that are greater that 30000 including the option any. Is there a way to do this in javascript or jQuery? sorry. I'm new at javascript and jQuery.. Thank you in advance!

    • javascript
    • jquery
    • html
    Share Improve this question asked Sep 22, 2012 at 5:58 Kevin Steve ManingoKevin Steve Maningo 2522 gold badges7 silver badges16 bronze badges 2
    • you should accept answers for your previous questions if they've helped you. – mcknz Commented Sep 22, 2012 at 6:04
    • o yeah.. thanks.. I always forget that.. =) – Kevin Steve Maningo Commented Sep 22, 2012 at 6:07
    Add a ment  | 

    3 Answers 3

    Reset to default 4

    Demo: http://jsfiddle/LsaLA/1/

    Code:

    function setTo() {
    var f = $('#From').val();
    var t = $('#To');
    t.children().hide();
    if( f == 'none' ) {
        t.children('[value="none"]').show();
        t.val('none');
    }
    else if( t == 'any' ) {
        t.children().show();
        t.val('any');
    }
    else {
        f = parseInt(f, 10);
        t.children().each(function() {
            if( $(this).val() == 'any' ) {
                $(this).show();
                t.val('any');
            }
            else {
                var v = parseInt($(this).val(), 10);
                if(!isNaN(v) && v >= f) {
                    $(this).show();
                }
            }
        });
        t.val('any');
    }
}

$('#From').change(setTo);


//call it on load as well
setTo();

    try this: http://jsfiddle/F6xnL/4/

    $("#From").change(function() {
$("#To").attr("disabled", false).children().each(function() {
    $(this).attr('disabled', false);
});

if ($(this).val() === 'any') return;
if ($(this).val() === 'none') {
    $("#To").val("none").attr("disabled", true);
    return;
}

var pound = parseInt($(this).val());
$("#To").children().each(function() {
    var val = $(this).val();
    if (val === 'none' || val === 'any') {
        $(this).attr('disabled', true); return;
    }
    if (parseInt($(this).val()) <= pound) {
        $(this).attr('disabled', true);
    }
});
});​

    $('#From').change(function(){
    if($(this).val() == 'none'){
        $('#To').prop('disabled', true);
    }else if((true == $('#To').prop('disabled')) && ($(this).val() != 'none')){
       $('#To').prop('disabled', false);          
    }
    $('#To option').each(function(){
        if($(this).val() < $('#From').val()){
            $(this).hide(0);
        }else{
            if($(this).css('display') == 'none'){
                $(this).show(0);   
           }
        }            
    });
});

    Untested, but this should work. I'm a bit verbose.

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far