Question

在选择框中的特定选项后，我必须向页面添加div元素。我怎么能用jQuery做到这一点？我正在尝试使用onClick事件，但它不起作用。

<div class="col-xs-7">
    <label for="sel1">Filter Type:</label>
    <select class="form-control" id="sel1">
        <option>Text</option>
        <option onclick="Adddivision();">List</option>  
    </select>
</div>
<script>
  function Adddivision(){

      <div class="col-xs-6">
      <label for="Filter Options">Filter Options:</label>
      </div>    
  }
</script>

Answer 1

您可以使用：

$('#sel1').on('change', function() {
  if($(this).find('option:selected').text()=="List" ){
     $('body').append('<div class="col-xs-6"><label for="Filter Options">Filter Options:</label></div>')//append div
     $('#sel1').off('change');
  }
});

Answer 2

使用onchange jQuery事件。

$(document).on("change", "#sel1", function(){
 if($(this).val() == 2) // 2 is the value of the <option> tag
 {
 var divElement = "<div>The Div Element that you want to be appended to your page</div>";
   $("body").append(divElement);
}
});

Answer 3

您可以使用以下jQuery将change事件绑定到选择框，并检查所选选项是否为List，然后将标签附加到div

$('#sel1').on('change', function() {
  var text = $(this).find('option:selected').text();
  if(text =="List" );
   {
    $(".col-xs-6").append('<label for="Filter Options">Filter Options:</label>');
   }
});

如何将事件与选择框的选项ID相关联

3 个答案: