Question

我有2个选择框，第二个选择框中的值取决于第一个选择框的选定值。

我尝试将其设置为小提琴，但我无法使其正常工作，但它正在html页面中工作。

它应该加载类型1，而在第二个选择框中，它的值为0,100,200,300和400.

当您将Type的值从1更改为2时，selectbox中的值应为0,100,200。

所以这个小提琴代码对我很有用，除了当我在第二个选择框中选择例如值200时，选择框不会显示200作为所选值而是0,00。

知道为什么吗？

我认为jquery是在一个函数内部调用两个选择框的每次更改。

enter code here

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

Answer 1

你需要添加一个onChange事件，并且onReady事件看起来是下面的小提琴。

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/

Answer 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>'));
  } 
});

这是jsFiddle link。希望这是你想要的。

使用jquery更改选择框的值

2 个答案: