いくつかの値を含むドロップダウン選択と、そのドロップダウンを複製するボタンがあるため、複数のドロップダウンを追加して値を設定できます。複製されたドロップダウンで選択された値は、他のドロップダウンでは使用できません。選択した値を変更した場合(ユーザーが気が変わった場合)他のドロップダウンを更新する必要があります.jqueryでこれを達成するにはどうすればよいですか?
<select class="firstCallDropDown" name="contactTypes">
<option value="1">Home</option>
<option value="2">e-mail</option>
<option value="3">Mobile</option>
<option value="4">Mobile2</option>
<option value="5">Work</option>
</select>
<a href ="#" id=addContactNumber>Add</a>
jquery:
$("#calls_column").delegate("#addContactNumber", "click", function(event) {
var firstDrop = $(".firstCallDropDown:first");
var clonedDrop = firstDrop.clone();
clonedDrop.find("option:selected").removeAttr("selected");
clonedSip.appendTo("#numbers");
refreshDropdowns();
});
function refreshDropdowns(){
var values = $("select[name='contactTypes']");
$(values).each(function () {
var text = $(this).children('option:selected').val();
var options = $("option[value='" + text + "']:not(:selected)");
$(options).each(function () {
$(this).remove();
});
});
}
これは私がこれまでに持っているものです!