[英]Can not set value dynamically in drop down using javascript/jquery
我有一個問題。我想使用javascript / Jquery通過onchange
事件在下拉列表中設置值。 我在下面解釋我的代碼。
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue();">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
function SetValue(){
var value=document.getElementById('leaveCode').value;
var name=document.getElementById('leaveCode').name;
document.getElementById('leaveCode1').value=value;
document.getElementById('leaveCode1').name=name;
}
在這里我的要求是當用戶從第一個下拉列表中選擇任何值時,它也會在禁用模式下顯示在第二個下拉列表中。請幫助我。
您可以使用以下語句添加並在leftcode1下拉列表中進行選擇。在js文件中使用以下語句
jQuery('#leaveCode').change(function(){
//get selected text from #leaveCode list
text = jQuery("#leaveCode option:selected").text();
//get selected value for selected text
value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");
});
您可以使用以下鏈接(已更新) -http://jsfiddle.net/aecrcvt2/2/進行檢查
最好的方法是在更改LeaveCode下拉列表時在下拉列表中追加新值
$("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});
function SetValue(obj) { var $this = $(obj); var val = $this.val(); var txt = $('option:selected', $this).text(); $('#leaveCode1').append($('<option></option>').val(val).html(txt)); $('#leaveCode1').val(val).prop('disabled', 'disabled'); } SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>drop down</h1> <p> <select id="leaveCode" name="leaveCode" onChange="SetValue(this);"> <option value="10">Annual Leave</option> <option value="11">Medical Leave</option> <option value="14">Long Service</option> <option value="17">Leave Without Pay</option> </select> </p> <p> <select id="leaveCode1" name="leaveCode"> <option value="">select value</option> <option value="21">xyz</option> <option value="21">abc</option> </select> </p>
我相信這是您需要的答案:
$("#leaveCode").change(function(){
var selectedOptionValue = $(this).find(":selected").val();
var selectedOptionText = $(this).find(":selected").text();
var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
$("#leaveCode1 option").last().after(newOption);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.