Question

我希望你能帮忙。

我有以下HTML代码：

<select id='bonus1frequency'>
<option value="0">Annual</option>
<option value="1">Half Yearly</option>
<option value="2">Quarterly</option>
</select>

根据选择的选项，字段显示在分隔符中。例如，如果选择年度，则会显示输入年度奖金的字段。如果您选择半年＆＃39;显示两个半年奖金的两个字段。

我遇到的麻烦是，如果你选择“每半年一次”的话。例如，然后在字段中输入半年奖金，然后改变主意并决定要输入年度奖金，保留您输入半年奖金的值。当你在html选择框中切换选项时，我需要将它们设置为零。

我尝试使用以下代码来帮助解决此问题，但它无法正常工作，我不确定原因。它只是阻止我在半年的盒子里放任何东西。

var bonus_val_1 = document.getElementById("bonus1frequency");
var strUser = bonus_val_1.options[bonus_val_1.selectedIndex].value;

 if  (strUser = "0") //if annual bonus is selected
 {

  document.getElementById("halfyear_bonus_one").value = 0.00;

}

编辑：

我在主HTML文档中使用以下JQUERY来实际切换用户选择每个选项时显示的字段。因此，如果用户选择选项值0＆＃39;年度＆＃39;在选择框中，以下代码将显示包含年度奖励字段的年度奖金分配器，并隐藏显示半年度和季度奖励字段的分隔符。

基于关于我如何将这些字段重置为更改事件的评论，我想也许我可以在以下jquery代码中将字段重置为零。然而，我对JQUERy更不熟悉，也不确定如何做到这一点......任何帮助都会非常感激。

$('#bonus1frequency').on('change', function() {
      if ( this.value == '0')
      //.....................^.......
      {
        $("#annual").show();
         $("#halfyearly").hide();
          $("#quarterly").hide();

      }
       if ( this.value == '1')
      //.....................^.......
      {
        $("#annual").hide();
         $("#halfyearly").show();
          $("#quarterly").hide();

      }

编辑2

我更新了代码如下：

$('#bonus1frequency').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
        $("#annual").show();
         $("#halfyearly").hide();
          $("#quarterly").hide();
          $("#halfyear_bonus_one").val("0");

这可以防止我将值输入半年奖励一个字段。它只是将值重置为零。我添加了一个空的＆＃39;选择＆＃39;选择框的选项，但它没有区别。有什么想法吗？

Answer 1

您的代码存在的问题是您没有将其绑定到select的更改事件。它将在加载页面时运行，并且由于下拉列表中的默认选项为“年度”，因此显示为#halfyear_bonus_one值的值将为0.00且不会更改，即使用户将选择其他选项下拉列表。

您应该创建一个包含代码的js函数（几乎没有更正）然后将其绑定到下拉列表的更改事件。此外，您应该添加条件来处理其他情况：“半年”和“季度”。

var bonusval1 = document.getElementById("bonus1frequency");
bonusval1.onchange = function () {
        var strUser = bonusval1.options[bonusval1.selectedIndex].value;
    if  (strUser == "0"){ //if annual bonus is selected
          document.getElementById("halfyear_bonus_one").value = "0.00";
    } else if(strUser == 1){ //Half yearly is selcted
          document.getElementById("halfyear_bonus_one").value = "1.00";    
    } else { //quertly is selected
          document.getElementById("halfyear_bonus_one").value = "2.00";    
    }
}

现在，还有另一个问题 - 默认值是第一个值 - 但“onchange”事件不会触发。我们可以在onchange事件之外运行该函数以处理默认值或您可以在下拉列表中添加一个空白选项作为第一个选项，例如“选择：”或其他任何内容。

Jsfiddle

关于第二个问题 我不明白你为什么会在你已经突然使用jQuery的时候写了很好的js代码。应该在流程开始时考虑这些决定。

无论如何，您可以使用.val()函数更改输入字段的值。我没有你的表格和分隔符的代码，但它应该非常类似于以下内容：

  if ( this.value == '0')
  //.....................^.......
  {
    $("#annual").show();
     $("#halfyearly").hide();
      $("#quarterly").hide();
    $("#id_of_input_for_halfyearly").val("0");
    $("#id_of_input_for_quarterly").val("0");

  }

Answer 2

请参阅以下内容获取帮助，并按季度添加代码。使用jquery而不是使用javascript代码来获取元素。

<select id="bonus1frequency">
<option value="0">Annual</option>
<option value="1">Half Yearly</option>
<option value="2">Quarterly</option>
</select>

<div id="annual" style="display: none;">
  <input type="text" id="a1">
</div>
<div id="half" style="display: block;">
  <input type="text" class="b2">
  <input type="text" class="b2">
  <script>
    $('#half').hide()//Same as this hide quarterly div
    $("#bonus1frequency").change(function(){
      var strUser = $(this).val()

    if (strUser === "0") //if annual bonus is selected
    {
      $('#annual').show()
      $('#half').hide()
      $(".b2").val(0);
    }else{
      $('#half').show()
      $('#annual').hide()
      $('#a1').val(0)
    }
    })
  </script>
</div>

Answer 3

我认为这会帮助你。

jQuery('#bonus1frequency').on('change',function(){
    if(this.value==1){
        jQuery('.yearly').val('').show();
        jQuery('.half-yearly').val(0).hide();
        jQuery('.quarterly').val(0).hide();
    }else if(this.value==2){
        jQuery('.yearly').val(0).hide();
        jQuery('.half-yearly').val('').show();
        jQuery('.quarterly').val(0).hide();
    }else if(this.value==3){
        jQuery('.yearly').val(0).hide();
        jQuery('.half-yearly').val(0).hide();
        jQuery('.quarterly').val('').show();
    }
})

选中此Demo

javascript选择框值不更新

编辑2

3 个答案: