Changing the value of a select box with jquery

问题

I have 2 select boxes and the values in the second selectbox are depending on the selected value of selectbox number one.

I try to set this in fiddle but I can't get it working, but it is working in the html page.

It should load with Type one and in the second selectbox there are the value 0, 100, 200, 300 and 400.

When you change the value of Type from one to two, then the values in the selectbox should be 0, 100, 200.

So this code in fiddle works for me quite well except that when I select for example the value 200 in the second selectbox, the selectbox don't show 200 as the selected value but 0,00.

Any idea why?

I think the jquery is inside a function that's called on every change of both selectboxes.

enter code here

http://jsfiddle.net/arieanneke/ee99o1f1/9/

回答1:

You needed to add an onChange event and also an onReady event look a the fiddle below.

function addOptions() {

if ($('#type').val() == "one") {
    $('#amount option[value="0"]').remove();
    $('#amount option[value="100"]').remove();
    $('#amount option[value="200"]').remove();
    $('#amount option[value="300"]').remove();
    $('#amount option[value="400"]').remove();
    $('#amount').append($('<option>', {
        value: 0,
        text: '0,00'
    }));
    $('#amount').append($('<option>', {
        value: 100,
        text: '100,00'
    }));
    $('#amount').append($('<option>', {
        value: 200,
        text: '200,00'
    }));
    $('#amount').append($('<option>', {
        value: 300,
        text: '300,00'
    }));
    $('#amount').append($('<option>', {
        value: 400,
        text: '400,00'
    }));
} else if ($('#type').val() == "two") {
    $('#amount option[value="0"]').remove();
    $('#amount option[value="100"]').remove();
    $('#amount option[value="200"]').remove();
    $('#amount option[value="300"]').remove();
    $('#amount option[value="400"]').remove();
    $('#amount').append($('<option>', {
        value: 0,
        text: '0,00'
    }));
    $('#amount').append($('<option>', {
        value: 100,
        text: '100,00'
    }));
    $('#amount').append($('<option>', {
        value: 200,
        text: '200,00'
    }));
}
}
$(document).ready(addOptions);

$('#type').on('change', addOptions);

http://jsfiddle.net/ee99o1f1/11/

回答2:

 $('#type').on('change', function(){     
  if($('#type').val()=="one") { 
     $('#amount option').remove();
     $('#amount').append($('<option value=0>0,00</option>'));
     $('#amount').append($('<option value=100>100,00</option>'));
     $('#amount').append($('<option value=200>200,00</option>'));
     $('#amount').append($('<option value=300>300,00</option>'));
     $('#amount').append($('<option value=400>400,00</option>'));   
  } else if ($('#type').val()=="two") { 
     $('#amount option').remove();
     $('#amount').append($('<option value=0>0,00</option>'));
     $('#amount').append($('<option value=100>100,00</option>'));
     $('#amount').append($('<option value=200>200,00</option>'));
  } 
});

Here's the jsFiddle link. Hope this is what you were looking for.

来源：https://stackoverflow.com/questions/25894033/changing-the-value-of-a-select-box-with-jquery

标签

jquery

drop-down-menu