Question

我想在从其中一个选项字段中选择一个选项后添加一个按钮。选项更改后，该按钮应立即显示。

＆＃13;

$(document).ready(function() {
  $("option").change(function() {
    $("button").append(" <button>Click Submit</button>");
  });
});

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<div id="circle1">
  <select id="field1" name="age" class="dropdown1">
    <option> Select One </option>
    <option value="18-25">5-7</option>
    <option value="26-32">7-9</option>
    <option value="33-40">10-12</option>
    <option value="40+">12-15</option>
  </select>
</div>
<div id="submit_button">...</div>

＆＃13;

Answer 1

为什么不将按钮设为已存在但将其显示设置为无？

style = "display: none;"

然后选择该选项时，只需将其显示为......

  $("button").show()

Answer 2

您可以隐藏按钮，例如

#submit_button { display:none;}

然后检查某些内容时只显示

  $('#field1').on('change', function() {
 $('#submit_button').show();

}）;

Answer 3

您可以在选择更改事件上动态添加按钮，例如：

＆＃13;

$('select').on('change', function() {
  var r= $('<input type="button" value="new button"/>');
        $("#button").append(r);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="button"> </div>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

＆＃13;

但是，您也可以隐藏按钮，然后在选择更改事件上显示它，如：

＆＃13;

$('select').on('change', function() {
  $('#btn').show();
})

＆＃13;

#btn{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="btn" value="new button"/>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

＆＃13;

Answer 4

由于所有其他答案都缺乏，我会建议：

使用正确的ID
切换现有按钮更有意义
注意我给了第一个选项value=""，因为它应该

＆＃13;

$(function() {
  $("#field1").on("change",function() {
    $("#submit_button").toggle(this.value!="");
  }).change(); // trigger when loading too
});

＆＃13;

#submit_button { display:none }

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<form>
<div id="circle1">
  <select id="field1" name="age" class="dropdown1">
    <option value=""> Select One </option>
    <option value="18-25">5-7</option>
    <option value="26-32">7-9</option>
    <option value="33-40">10-12</option>
    <option value="40+">12-15</option>
  </select>
</div>
<button id="submit_button">Submit</button>
</form>

＆＃13;

在事件发生后添加一个按钮

4 个答案: