Question

我的下拉列表如下：

<select class="quick-drop" id="block-type-drop">
  <option value="Block">Block</option>
  <option value="Monthly">Monthly</option>
  <option value="Weekly">Weekly</option>
</select>

我创建了一个从数据库中获取其中一个值的ajax请求。该值存储在名为data的变量中。

function changeSelectedBlockType(property, subProperty, position) {
    //check if position is display only
    jQuery.ajax({
        method: "POST",
        url: url,
        data: {
            'action': 'getBlockType', 
            'property': property, 
            'subProperty': subProperty,
            'position': position
        }
    })
    .done(function(data) {
        console.log(data);
        //jQuery('#block-type-drop option[value="' + data +'"]').prop('selected', true);
        jQuery('#block-type-drop').val(data).change();
        //jQuery('#block-type-drop').change();
    })
    .fail(function(data) {
        console.log('Failed AJAX Call! /// Return Data: ' + data);
    });
}

然后我尝试更改所选的选项：

jQuery('#block-type-drop').val(data).change();

所选选项变为空白。我通过将值写入控制台来测试该值，以查看是否有额外的空间或不正确的值，但它看起来不错。

我还尝试使用以下方法更改所选选项：

jQuery('#block-type-drop option[value="' + data +'"]').prop('selected', true);

这不会做任何事情，而是将所选选项留空。如果有帮助，使用console.log(jQuery().jquery);报告我的jQuery版本是1.12.4。我不确定之前运行的版本是什么，但我怀疑它最近更新了。

有什么想法吗？我不知所措。

编辑：代码本身是正确的。将数据变量写入控制台时，我注意到变量在它之前有一个额外的换行符。经过进一步调查后，这似乎发生在从AJAX调用返回的所有变量中。不知道为什么会这样。

Answer 1

不需要复杂的代码。答案其实很简单：

jQuery('#block-type-drop').val(data);

就是这样。您将select的值更改为data字符串，并且select会相应地更新其选择。

但data代表1：1的值非常重要。相同的捕获等。

请参阅此处的简单示例：

$(function(){

$('#clickme').on('click', function(){
$('#block-type-drop').val('Weekly');
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="quick-drop" id="block-type-drop">
  <option value="Block">Block</option>
  <option value="Monthly">Monthly</option>
  <option value="Weekly">Weekly</option>
</select>

<button id="clickme">Change selection</button>

Answer 2

数据只会出现问题，请再次检查..正如您在此处看到的那样工作和非工作示例..同时检查大写＆amp;小写字母..

＆＃13;

function callonclick(valueset) {
  jQuery('#block-type-drop').val(valueset).trigger('change');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="quick-drop" id="block-type-drop">
  <option value="Block">Block</option>
  <option value="Monthly">Monthly</option>
  <option value="Weekly">Weekly</option>
</select>

<button onclick="callonclick('Monthly');">Set value `Monthly`</button>
<button onclick="callonclick('monthly');">Set value `monthly` results in blank</button>

＆＃13;

Answer 3

问题是由我的一个php文件中的结束?>标记末尾的额外行创建的。

AJAX响应添加额外的换行符

3 个答案: