Question

我对JQuery很新，需要一些帮助。虽然基于我的问题很少，但无法解决我的问题。

我将整个表单作为JSON保存在表中。检索后，我需要填充多个下拉列表，mutliselect列表框等。检索到的JSON看起来像这样。

"{"dateType":"TODAY","quickSetDate":"ANOTHER_DATE"}"

注意：dateType是表单中的id，并在JSON中存储为密钥。

表格是什么样的。

<select id="dateType" class="form-control selectpicker" name="dateType">
    <option value="today">Today</option>
    <option value="tomorrow">Tomorrow</option>
    <option value="date_after">Day After</option>
</select>

下拉ID为dateType和quickSetDate。我需要做的是，基于JSON值（TODAY），我需要在下拉列表中搜索，设置该值并将文本更改为“今天”。

任何帮助都将不胜感激。

Jquery版本是2.x

Answer 1

如果您的dateType的JSON数据返回到变量数据中，您可以尝试以下内容：

$('#dateType').options[0].text(data.dateType);

也可以设置值，将.text（）更改为val（）;

Answer 2

我认为最好直接选择带有json值的选项。试试这个

var json = {"dateType":"tomorrow","quickSetDate":"ANOTHER_DATE"};
var jsonValue = json.dateType;

// loop on each option
$('#dateType option').each(function(index,currentOption){
        var currentValue = $(currentOption).val();// value of current option
        if(currentValue.localeCompare(jsonValue) == 0){
            // if value are the same select this option
            $(currentOption).prop('selected', true);
            return false;// stop loop
        }
});

我希望这对你有所帮助。

Answer 3

尝试使用JSON.parse()，for..in循环，.is()，.prepend()，String.prototype.charAt()，String.prototype.slice()，String.prototype.toLowerCase()

＆＃13;

var data = '{"dateType":"TODAY","quickSetDate":"ANOTHER_DATE"}';

var obj = JSON.parse(data);

for (var prop in obj) {
  if ($("select").is("#" + prop)) {
    $("#" + prop)
    .prepend($("<option>", {
      val: obj[prop].toLowerCase(),
      html: obj[prop].charAt(0) + obj[prop].slice(1).toLowerCase(),
      selected: true
    }))    
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="dateType" class="form-control selectpicker" name="dateType">
</select>

＆＃13;

JQuery - 设置值和文本

3 个答案: