Question

使用下面的代码，我根据下拉选择显示或隐藏两个div。我的问题是如何让div thar显示出需要文本框？

$(document).ready(function(){
    $("#europerkg").hide();
    $("#flatfee").hide();
    $('#rate').on('change', function() {
        if (this.value == '1') {
            $("#europerkg").show();
            $("#flatfee").hide();
        }

        if (this.value == '2') {
            $("#europerkg").hide();
            $("#flatfee").show();
        }

        if (this.value == '3') {
            $("#europerkg").show();
            $("#flatfee").show();
        }
    });
});

<div class="col-md-3" id="europerkg">
    <label class="form-label">&euro; / kg</label>
    <input name="europerkg" id="europerkg" type="text" class="form-control" placeholder="">
</div>
<div class="col-md-3" id="flatfee">
    <label class="form-label">Flat Fee</label>
    <input name="flatfee" id="flatfee" type="text" class="form-control" placeholder="">
</div>

Answer 1

首先，您不能为不同的元素使用相同的ID，这里是div标签和输入标签您使用了相同的ID，

请检查修改后的代码，我已更改了元素的ID，并添加了所需的代码。

$(document).ready(function(){
$("#europerkg").hide();
        $("#flatfee").hide();
    $('#rate').on('change', function() {
      if ( this.value == '1')
      {
        $("#europerkg").show();
        $("#flatfee").hide();
        $("div input[id = 'europerkgtxt']").attr('required','required');
      }
      if ( this.value == '2')
      {
        $("#europerkg").hide();
        $("#flatfee").show();
       $("div input[id = 'flatfeetxt']").attr('required','required');
      }
            if ( this.value == '3')
      {
        $("#europerkg").show();
        $("#flatfee").show();
        $("div input[id = 'europerkgtxt']").attr('required','required');
        $("div input[id = 'flatfeetxt']").attr('required','required');

      }
    });
});

<div class="col-md-3" id="europerkg">
<label class="form-label">&euro; / kg</label>
<input name="europerkg" id="europerkgtxt" type="text" class="form-control" placeholder=""  >
</div>
<div class="col-md-3" id="flatfee">
<label class="form-label">Flat Fee</label>
<input name="flatfee" id="flatfeetxt" type="text" class="form-control" placeholder=""  >
</div>

Answer 2

要将所需内容添加到输入，请参阅this

在您的情况下，代码应为：

$(document).ready(function(){
    $("#europerkg").hide();
    $("#flatfee").hide();

    $('#rate').on('change', function() {
      if ( this.value == '1')
      {
        $("#europerkg").show();
        $("#europerkg").prop('required',true);
        $("#flatfee").hide();
        $("#flatfee").prop('required',false);
      }
      if ( this.value == '2')
      {
        $("#europerkg").hide();
        $("#europerkg").prop('required',false);
        $("#flatfee").show();
        $("#flatfee").prop('required',true);
      }
            if ( this.value == '3')
      {
        $("#europerkg").show();
        $("#europerkg").prop('required',true);
        $("#flatfee").show();
        $("#flatfee").prop('required',true);
      }
    });
});

Answer 3

根据Meghana的回答，您还必须删除所需的属性。否则，如果用户更改了一次以上的速率，则两个文本都可以具有必需的属性。

$(document).ready(function(){
  $("#europerkg, #flatfee").hide();

  $('#rate').on('change', function() {

    $("#europerkgtxt, #flatfeetxt").removeAttr('required');

    if ( this.value == '1') {
       $("#europerkg").show();
       $("#flatfee").hide();
       $("#europerkgtxt").attr('required','required');
    }

    if ( this.value == '2')
    {
       $("#europerkg").hide();
       $("#flatfee").show();
       $("#flatfeetxt").attr('required','required');
    }

    if ( this.value == '3')
    {
       $("#europerkg").show();
       $("#flatfee").show();
       $("#europerkgtxt").attr('required','required');
       $("#flatfeetxt").attr('required','required');
    }
  });
});

如何根据下拉选择的div可见性制作所需的文本框？

3 个答案: