Question

我需要根据加载页面时从控制器获取的一个值动态设置选择选项。

    <script>
    validate selectOptions();

    function selectOptions(){
    var healthWorkerQuestions1 = "${healthWorkerQuestions}";
    if(healthWorkerQuestions1 == "6" || healthWorkerQuestions1 == "7" || healthWorkerQuestions1 == "8"){
                     alert("six to eight"); 
                     $('#questionOptions').empty();
                     var sel = document.getElementById('questionOptions');
                      for(var i = 0; i < drinker.length; i++) {
                        var opt = document.createElement('option');
                        opt.innerHTML = drinker[i];
                        opt.value = drinker[i];
                        $('questionOptions').append(opt).selectmenu('refresh');
                        //sel.appendChild(opt).selectmenu('refresh');
                       }             
            }

    }
  </script>

此处循环正在执行，并且能够看到警告框。并且选择框中的选择框选项不会更新。我尝试了以下两种方式，

$('questionOptions').append(opt).selectmenu('refresh');
sel.appendChild(opt).selectmenu('refresh');

但是加载页面时选项没有更新。

选择框的代码是，

<select name="questionOptions" id="questionOptions">
<option>Select</option>
</select>

加载页面后，我只能看到选择选项，但看不到动态追加的值。如何在页面加载时更新选择选项。

请提出任何建议..

Answer 1

代码看起来很好。要更新select选项，请调用方法表单jQuery document ready函数，如下所述，

<script>
$(function(){
selectOptions();
});

function selectOptions(){
// Your code here....
}
</script>

希望这会对你有所帮助。

在加载页面时动态设置选择选项

1 个答案: