JQuery - 設置值和文本

我對JQuery相當陌生，需要一些幫助。雖然基於我的問題很少，但無法解決我所遇到的問題。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

來源

2016-03-03 Samanth Rao

[HTML/JS的可能重複：如何更改使用JS選擇類型的期權價值]（http://stackoverflow.com/questions/8716064/html-js-how-to-change-option-value-of-select-type-using-js） – Cruiser

_「我需要做的是，基於JSON值（TODAY），我需要要在下拉菜單中進行搜索，請設置該值並將文本更改爲「今天」。_值和文本似乎已分別設置爲「今天」，「今天」？ – guest271314

可能是。謝謝。但不是我正在尋找的解決方案。當我檢索JSON時，我沒有要設置的文本。這必須基於我手中的價值而發生。例如。「TODAY」，「TOMORROW」或「DAY_AFTER」 –

如果您dateType JSON數據回來的可變數據，你會嘗試這樣的：

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

用於設置值太大，改變的.text （）到val（）;

來源

2016-03-03 14:21:27 Cruiser

我認爲最好直接選擇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 
     } 
});

我希望這對你有所幫助。

來源

2016-03-03 14:27:02

嘗試使用JSON.parse()，for..in循環，.is()，.prepend()，String.prototype.charAt()，String.prototype.slice()，String.prototype.toLowerCase()

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 
 
    }))  
 
    } 
 
}

<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>

來源

2016-03-03 14:27:53 guest271314

JQuery - 設置值和文本

回答

相關問題