使用 jquery 更改选择框的值答案

【问题标题】：Changing the value of a select box with jquery使用 jquery 更改选择框的值
【发布时间】：2014-09-17 14:59:19
【问题描述】：

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

我尝试在小提琴中设置它，但我无法让它工作，但它在 html 页面中工作。

它应该加载类型一，在第二个选择框中有值 0、100、200、300 和 400。

当你将 Type 的值从 1 更改为 2 时，选择框中的值应该是 0、100、200。

所以小提琴中的这段代码对我来说非常有效，除了当我在第二个选择框中选择例如值 200 时，选择框不会将 200 显示为所选值，而是显示 0,00。

知道为什么吗？

我认为 jquery 位于一个函数内，该函数在两个选择框的每次更改时都会被调用。

enter code here

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

【问题讨论】：

标签： jquery drop-down-menu

【解决方案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/

【讨论】：

【解决方案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。希望这就是您想要的。

【讨论】：