Question

我尝试从select选项通过AJAX触发HTML页面。在加载时，必须根据从IP地址检测到的“countryCode”值进行触发器更改。

例如，如果SG检测到。比较“countryCode”和选项“ID”。两者都相同时触发选择。

我目前的代码正确检测国家/地区。但是，触发选项不起作用。

HTML：

<div class="selector list">
    <select name="country" id="country">
        <option id="EN" value="global.html">Global</option>
        <option id="AU" value="australia.html">Australia</option>
        <option id="ID" value="indonesia.html">Indonesia</option>
    </select>
</div>

JS：

function getCountryCode () {
   var now = new Date().getTime();
   var randomNumber = Math.floor((Math.random() * 100) + 1);
   var uniqueNumber = now + 'a' + randomNumber;

   $.getScript("/web-services/getCountryCode.js?" + uniqueNumber, function(data, textStatus, jqxhr) {
       if (originCountry){
           var countryCode = originCountry;
           //var countryVal = 'EN';
           // $('.selector #country option[id='+countryVal+']').attr('selected', 'selected');

           $('#country option[id='+countryCode+']').attr('selected', 'selected');
           $('.selector #country').trigger('change'); 
       }
   });
}

HTML生成的代码:(通过检查元素）

它生成这样的选项并且没有“id”值。如何在这里添加id属性。我们正在使用http://brianreavis.github.io/selectize.js/插件。

<select name="country" id="country" tabindex="-1" style="display: none;">
  <option value="HK.html" selected="selected"></option>
</select>

Answer 1

试试这个，

$('.selector #country').get(0).change();

Answer 2

由于您正在使用选择性，您需要使用其api来选择值

＆＃13;

var cmap = {}; //create a shared object storing the code-value mapping
$('#country option').each(function() {
  cmap[this.id] = this.value;
})
$('#country').selectize({});


//then later in the ajax callback
var countryCode = 'AU';
var $country = $('#country');
console.log(cmap[countryCode])
$country.prop('selectize').setValue(cmap[countryCode]);

＆＃13;

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>

<div class="selector list">
  <select name="country" id="country">
    <option id="EN" value="global.html">Global</option>
    <option id="AU" value="australia.html">Australia</option>
    <option id="ID" value="indonesia.html">Indonesia</option>
  </select>
</div>

＆＃13;

基于ID

2 个答案: