Question

我需要显示两个具有相同选项的选择列表（有很多）。

我有index.html：

<body>

<select class="c_select1"></select>
<select class="c_select2"></select>

</body>

并在另一个html文件（options.html）中显示所有选项（仅选项）：

<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>

然后，使用jQuery，我在两个select标签内加载选项，使用相同的指令和不同的类选择器：

 $(".c_select1").load("options.html");

我想将默认选项显示为两个不同的值（因为我需要显示货币转换器）。

我尝试过两种不同的方式，但其中任何一种都可以正常工作（我只展示一种代码）。

<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>

或

$(".c_select1").val("ARS");

我不知道为什么，但我认为jQuery的.load（）存在问题。

唯一有效的解决方案是2：

设置计时器并在此计时器
为每个选择标记使用2个不同的options.html文件，但我认为它不是那么聪明。

有更好的方法动态地执行此操作吗？

Answer 1

试试这个：

$(".c_select1").load("options.html", function(){
    $(".c_select1").val("ARS");
});

说明：

.load() jQuery方法需要一些时间来获取options.html的内容（即使只有几毫秒）。在继续运行其余的javascript逻辑之前，浏览器不会等待它。我添加到function(){方法调用中的.load(是一些在结果返回后运行的javascript逻辑（也称为“回调”）。

Answer 2

使用回调：

$(".c_select1").load("options.html", function() {
    $(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
    $(".c_select2").val("ARS");
});

Answer 3

实际上存在延迟加载方法，这就是所选项目不起作用的原因。就像@Joulss所说的那样使用应该起作用的回调方法。你可以在这里看到。

 $(function(){

      $(".c_select1").load("option.html", function() {
          $(".c_select1").val("AFN");
      });

      $(".c_select2").load("option.html", function() {
          $(".c_select2").val("ANG");
      });
  });

Demo

如何在HTML中的select /选项中选择所选选项？

3 个答案: