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

Question

I need to display two select lists with the same options (there are many). 我需要显示两个具有相同选项的选择列表（有很多）。

I have the index.html: 我有index.html：

<body>

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

</body>

and in another html file (options.html) all the options ( only the options): 在另一个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>

Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector: 然后，使用jQuery，使用相同的指令和不同的类选择器在两个选择标签中加载选项：

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

I'd like to display as default selected option two different values (since I need to show a currency converter). 我想显示两个不同值作为默认选择的选项（因为我需要显示货币转换器）。

I've tried in 2 different ways, but any of these works fine (I show the code for just one). 我已经尝试了2种不同的方式，但是其中任何一种都可以正常工作（我仅显示一种代码）。

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

or 要么

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

I don't know why, but I think there is a problem with the .load() of jQuery. 我不知道为什么，但是我认为jQuery的.load（）有问题。

The only solutions that work are 2: 唯一可行的解决方案是2：

set a timer and execute the second jQuery statement after this timer 设置一个计时器并在此计时器之后执行第二个jQuery语句
use 2 different options.html files one for each select tag, but I think it is not so clever. 请为每个select标签使用2个不同的options.html文件，但是我认为它并不那么聪明。

Is there a better way to do this dynamically? 有没有更好的方法可以动态地做到这一点？

Answer 1

Try this: 尝试这个：

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

Explained: 解释：

The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). jQuery方法.load()需要一些时间来获取options.html的内容（即使只是几毫秒）。 The browser doesn't wait for it before continuing to run the rest of the javascript logic. 浏览器在继续运行其余javascript逻辑之前不会等待它。 The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback"). 我在您的.load(方法调用中添加的function(){是一些返回结果返回后运行的javascript逻辑（又称为“回调”））。

Answer 2

Use a callback : 使用回调：

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

Answer 3

Actually there is a delay of load method that is why selected item is not working. 实际上，有一个加载方法的延迟，这就是为什么所选项目不起作用的原因。 Like @Joulss said use callback method that should work. 就像@Joulss所说的那样，应该使用回调方法。 You can see the here. 您可以在这里看到。

 $(function(){

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

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

Demo 演示版

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

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-11-28 20:24:49

解决方案2
3 2017-11-28 20:25:40

解决方案3
1 2017-11-28 20:32:46

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-11-28 20:24:49

解决方案2 3 2017-11-28 20:25:40

解决方案3 1 2017-11-28 20:32:46

解决方案1
3 已采纳 2017-11-28 20:24:49

解决方案2
3 2017-11-28 20:25:40

解决方案3
1 2017-11-28 20:32:46