如何做一个<选项>默认为ajax填充<JQueryMobile

How to make a <option> default selected for a ajax-filled <select> with JQueryMobile?

本文关键字：ajax JQueryMobile 填充 默认 选项 何做一      更新时间：2023-09-26

我用ajax调用的响应填充我的<select>。

下面是JS代码: 
var myOptions = {val1 : project1,
                 val2 : project1,
                 val4 : project1,
                 val5 : project1,
                 };
                 $.each(myOptions, function(val, text) {
                 $('#projectid').append(
                 $('<option ></option>').val(val).html(text)
                 );
                 });
我的HTML代码: 
<input type="hidden" name="ehidden" value="true">
  <select name="project" id="projectid"></select>

所需的下拉列表我得到的是好的，但我不能设置第一个<option>默认选择。

下面是一些我已经尝试过的代码:

$('select.projectid').find('option[value="val1"]').prop('selected', true);

我没有得到错误，但也没有结果。

$("#projectid").val($("#projectid option:first").val());

第二个问题:

第一个<option>是不可用的，我第一次选择它每次鼠标点击，我必须先选择第二个<option>，然后再选择第一个。

您的选择器在这一行是错误的:

$('select.projectid').find('option[value="val1"]').prop('selected', true);

即选择class为projectid的下拉列表。应该是:

$('#projectid').find('option[value="val1"]').prop('selected', true);

…它将选择id为projectid的元素。

关于此代码:

$("#projectid").val($("#projectid option:first").val());

我不确定你想让它做什么，但它会在下拉菜单中选择第一个选项。如果未选择其他选项，则默认选择第一个选项。因此，如果要在页面加载时运行这段代码，它当然不会做任何事情，因为第一个选项已经被选中。

关于你的"第二个"问题，你需要把它作为一个单独的问题发布，因为它与这个问题无关。但是，在你提出这个问题之前，一定要在SO上找到答案。

您可以对代码进行一些改进，使其更简单，并允许您轻松标记所选选项。这里有一个jsfiddle来解决你的问题:jsfiddle

var myOptions = [
    { name: "A", value: "val1", selected: true},
    { name: "B", value: "val2"},
    { name: "C", value: "val3"},
    { name: "D", value: "val4"}
];
var optionsHtml = "";
for(var i = 0; i < myOptions.length; i++) {
    var val = myOptions[i];
    optionsHtml += '<option value = "' + val.value + '"';
    if(val.selected)
        optionsHtml += 'selected="' + val.selected + '"';
    optionsHtml += '>' + val.name + '</option>';
}
$('#projectid').append(optionsHtml).selectmenu('refresh', true);;

你只需要为你的选项构建html，然后附加到所有的选择一次。这将提高代码的性能，因为您只需要追加一次，从而导致浏览器重新绘制一次。

这样做，你可以将选项构建为字符串。我不知道你是如何决定选择哪个选项的，但是你应该能够修改if子句来满足你的需要。

What you tried

$('select.projectid').find('option[value="val1"]').prop('selected', true);

这将不能工作，因为你的选择器是错误的。你在这里使用id作为你想要的类:$ (' # projectid ') 

$("#projectid").val($("#projectid option:first").val());

我不知道为什么这不起作用。但是您不希望这样做，因为很难动态地选择选项。

编辑

要让jQuery Mobile中的select更新它的选择，你必须调用refresh。

相关文章：