Question

我想要实现的是，如果用户在select标记中选择了一个数字，那么许多表单应显示在select标记下方。我正在使用Jquery来实现这一目标。但它不起作用：

选择标记： -

<label>How many credit cards do you have:*
    <select name="debts_cards" id="debts_cards" required>
        <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
    </select>
</label>

包含相同类型形式的10个div： -

<div id="debts_cards_extra">
    <h2>Credit Card 1</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
</div>
<div id="debts_cards_extra2">
    <h2>Credit Card 2</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra2_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra2_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra2_owing">
    </label>
</div>
<div id="debts_cards_extra3">
    <h2>Credit Card 3</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra3_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra3_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra3_owing">
    </label>
</div>
<!-- and so on..... -->

Jquery的： -

$(document).ready(function(){
  $('#debts_cards').on('change', function() {
  if ( this.value == '0' )
  //.....................^.......
  {
    $("#debts_cards_extra").hide();
  }
  elseif ( this.value == '1' )
  {
    $("#debts_cards_extra").show();
  }
  elseif ( this.value == '2' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
  }
  elseif ( this.value == '3' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
  }
  elseif ( this.value == '4' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
    $("#debts_cards_extra4").show();
  }
// and so on.....
});
});

为什么不起作用？在这里你可以看到它live。请注意我正在使用Wordpress。我们赞赏任何正确方向的帮助。

Answer 1

在现场演示中，首次加载页面时会显示所有10个div。

所以del cL[1][cL[0]-1:]不会有任何区别，因为div首先已经可见了。

对于每个div，您可以$("#debts_cards_extra").show();：

style = "display:none;"

编辑::我在This小提琴中将<div id="debts_cards_extra" style = "display:none;"> <h2>Credit Card 1</h2> <label> Provider: <input type="text" name="debts_cards_extra_provider"> </label> <label> Credit Card Limit: <input type="number" name="debts_cards_extra_limit"> </label> <label> How much do you have owing: <input type="number" name="debts_cards_extra_owing"> </label> </div>更改为elseif。工作。

Answer 2

你错过了id而不是

 <select name="debts_cards" required>

使用

<select id="debts_cards" required>

也改变了：

this.value to $(this).val();

Answer 3

<select name="debts_cards" required>替换<select name="debts_cards" id='debts_cards' required>

在一个变量var selectedValue=$('#debts_cards').val()中选择值并将此.value替换为selectedValue

Answer 4

＆＃13;

$(document).ready(function(){  
ABC();
});

function ABC(){  
var sleectedValue=$('#debts_cards').val();
  if (sleectedValue == '0' )
  //.....................^.......
  {
    $("#debts_cards_extra").hide();
  }
  else if (sleectedValue == '1' )
  {
    $("#debts_cards_extra").show();
  }
  else if (sleectedValue == '2' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
  }
  else if (sleectedValue == '3' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
  }
  else if (sleectedValue == '4' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
    $("#debts_cards_extra4").show();
  }
// and so on.....
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label>How many credit cards do you have:*
    <select name="debts_cards" id="debts_cards" onchange="ABC();" required>
        <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
    </select>
</label>

<div id="debts_cards_extra">
    <h2>Credit Card 1</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
</div>
<div id="debts_cards_extra2">
    <h2>Credit Card 2</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra2_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra2_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra2_owing">
    </label>
</div>
<div id="debts_cards_extra3">
    <h2>Credit Card 3</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra3_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra3_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra3_owing">
    </label>
</div>

＆＃13;

Answer 5

首先，当它们都遵循某种格式时，输入或复制粘贴所有重复的HTML是一种非常糟糕的技术。最好是为了生成/删除HTML onchange。

同样，form可能比div更好，因为它们有点像形式，并且可能更容易定位它们。

var credit_card_form = `
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
`;

function formGenerator (event) {
  let quantity = event.target.value
  let forms = $("form")
  
  console.log(forms.length, quantity)
  
  if (forms.length > quantity) {
    forms.slice(quantity).each( function(index) {
      $(this).remove()
    })
  }
  
  if (forms.length < quantity) {
    for (let i = forms.length; i < quantity; i++) {
      let new_form = document.createElement("form");
      new_form.name = "debts_cards_extra"
      let num = i + 1
      let title = `<h2>Credit Card ${num}</h2>`
      new_form.innerHTML = title + credit_card_form
      $(".body").append(new_form);
    }
  }
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="body">

<label>How many credit cards do you have:*
    <select name="debts_cards" id="debts_cards" onchange="formGenerator(event)" required>
        <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
    </select>
</label>

</div>

根据选择标记选择显示多个div

5 个答案: