jquery数据加载oonce只是不再工作

Question

我已经创建了一个jquery方法，用于在从下拉列表中选择时加载数据，但问题是当我单击并选择并且数据更改时，我选择它时再次不再工作

请查看下面我已完成的内容

$(document).ready(function() {
		$('select[name="ht_opt"]').change(function() { 
			var tab    = $('select[name="ht_opt"]').val();
			var symbol = $('#symbol').val();
			if ($(this).val()){
			var dropdown = "<select name='ht_opt'><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>";
					
					$('#ht_title').html(tab + " " + dropdown);
					$('#ht_data').html(symbol);
				}
		 }  
		});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">Balance Sheet
		<select name="ht_opt">
			<option>Balance Sheet</option>
			<option>Profit and Loss Account</option>
			<option>Cash Flow Statement</option>
		</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />

<div id="ht_data">
</div>

Demo fiddle

Answer 1

您可以使用jquery的on()功能。因为您在select函数的每次附加change标记。

只需按照下面的@devnull69评论使用第一个选项，例如<option style='color:#ccc'>--select option--</option>

＆＃13;

＆＃13;

$(document).ready(function() {
  $(document).on('change','select[name="ht_opt"]',function() {
      var tab = $(this).val();
      var symbol = $('#symbol').val();
      if ($(this).val()) {
        var dropdown = "<select name='ht_opt'><option style='color:#ccc'>--select option--</option><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>";

        $('#ht_title').html(tab + " " + dropdown);
        $('#ht_data').html(symbol);
      }
    
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">Balance Sheet
  <select name="ht_opt">
              <option style="color:#ccc">--select option--</option>
							<option>Balance Sheet</option>
							<option>Profit and Loss Account</option>
							<option>Cash Flow Statement</option>
						</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />

<div id="ht_data">
</div>

＆＃13;

＆＃13;

＆＃13;

更新回答 ：显示所选值而不重现select标记

＆＃13;

＆＃13;

$(document).ready(function() {
  $(document).on('change', 'select[name="ht_opt"]', function() {
    var tab = $(this).val();
    var symbol = $('#symbol').val();
    $('select[name="ht_opt"] option').removeClass('select')
  $('select[name="ht_opt"] option:selected').addClass('select')
    if (tab) {
      $('#ht_title p').html(tab);
      $('#ht_data').html(symbol);
    }
  })
})

＆＃13;

.select{
background:#aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">
  <p>Balance Sheet</p>
  <select name="ht_opt">
    							<option class="select">Balance Sheet</option>
    							<option>Profit and Loss Account</option>
    							<option>Cash Flow Statement</option>
    						</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />

<div id="ht_data">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用委托。但是从jQuery 3.0开始，.delegate（）已被弃用。它被。 on（）方法

取代

<强>段

$(document).ready(function() {
  $('body').delegate('select[name="ht_opt"]','change', function(){
    var tab    = $('select[name="ht_opt"]').val();
    var symbol = $('#symbol').val();
    if ($(this).val()){
      var dropdown = "<select name='ht_opt'><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>";
      console.log(dropdown);
      $('#ht_title').html(tab + " " + dropdown);
      $('#ht_data').html(symbol);
    }  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">Balance Sheet
  <select name="ht_opt">
    <option>Balance Sheet</option>
    <option>Profit and Loss Account</option>
    <option>Cash Flow Statement</option>
  </select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />

<div id="ht_data">
</div>

这是jsfiddle：https://jsfiddle.net/nc425yh1/9/