选择包含HTML的变量的下拉选项

Question

变量包含html

var empDaysStatusDropDown =
"<select class='statusList form-control'><option value='1'>Official On</option><option value='2'>Official Off</option><option value='3'>Sick Leave</option><option value='4'>Casual Leave</option><option value='5'>Annual Leave</option></select>"

我想通过选择任何下拉选项通过编程来更新此html？

意味着我想选择下拉菜单0、1、2、3中的任何一个，并相应地更新html，以便当我在页面上显示html时，该选项将被选中，我首先选择

Answer 1

编辑：

我也为此创建了小提琴： 演示

据我说，您需要先实现它，然后再将其添加到页面中。 因此，您想在jquery中对其进行操作，我们开始：

var empDaysStatusDropDown =
$("<select class='statusList form-control'><option value='1'>Official On</option><option value='2'>Official Off</option><option value='3'>Sick Leave</option><option value='4'>Casual Leave</option><option value='5'>Annual Leave</option></select>");
empDaysStatusDropDown.find('option[value="1"]').attr('selected','selected');
// now you can append empDaysDropDown anywhere on the page.
$('body').append(empDaysStatusDropDown);

希望这可以帮助 ：）

Answer 2

Try this
$(document.body).on("change",".statusList",function(){
  if(".statusList option:selected").val()=="1"){
   empDaysStatusDropDown ="new html";
  }
})