將datalist選項轉換爲json

Question

我有一個表單，我有一些我想包含在json對象中的變量。我創建了一個函數，但是我的表單字段中有一個是數據變量，我找不到將它轉換爲Json的方法。 這是函數：

$('#myBtn2').click(function() { 
    var form_server = { 
      "id": JSON.parse($('#id').val()), 
      "type": "service", 
      "name": $("#name").val(), 
      "msg_types": [6,7,8,9], 
      "billing_id": JSON.parse($('#billing_id').val()), 
      "billing_name": $("#partner").val(), 
      "ips": [$('#ips').val()], 
      "url": $('#callbackurl').val(), 
     }; 

    var json_server = JSON.stringify(form_server, null, 2); 

    $('#myBtn2').after('<pre>' + json_server + '</pre>'); 

}); 

的HTML形式如下：

<label for="id">ID: </label> 
<input id="id" name="id" type= "number"/><br> 
<label for="name">Service name: </label> 
<input id="name" name="name" type="text" /><br> 
<br><label for="billing_id">Billing ID (Partner ID/GUID): </label> 
<input id="billing_id" name="billing_id" type= "number"/><br> 

<label for="ips">IP addresses: </label> 
<input id="ips" name="ips" type="text" /><br> 

<label for="url">Callback URL: </label> 
<input id="callbackurl" name="callbackurl" type="url" /><br> 

<input name="myBtn2" id="myBtn2" type="button" value="Submit Data" /> 

<label>Partner Name</label><br>Please add a partner if not on the list bellow<br> 
<input list="partner" name="partner" type="text"> 
<datalist id="partner"> 
    <option value="42">42</option> 
    <option value="SMS">SMS</option> 
    <option value="Online">Online</option> 
</datalist><br> 

當我從列表中選擇一個選項，按下提交按鈕，我收到正確的JSON，但開票名稱是空：「」。

Answer 1

嘗試使用選擇$("input[list=partner]")，除去尾隨逗號,你爲什麼不只是使用以下$('#callbackurl').val()

$('#myBtn2').click(function() { 
 
    var form_server = { 
 
    "id": JSON.parse($('#id').val()), 
 
    "type": "service", 
 
    "name": $("#name").val(), 
 
    "msg_types": [6, 7, 8, 9], 
 
    "billing_id": JSON.parse($('#billing_id').val()), 
 
    "billing_name": $("input[list=partner]").val(), 
 
    "ips": [$('#ips').val()], 
 
    "url": $('#callbackurl').val() 
 
    }; 
 

 
    var json_server = JSON.stringify(form_server, null, 2); 
 

 
    $('#myBtn2').after('<pre>' + json_server + '</pre>'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="id">ID:</label> 
 
<input id="id" name="id" type="number" /> 
 
<br> 
 
<label for="name">Service name:</label> 
 
<input id="name" name="name" type="text" /> 
 
<br> 
 
<br> 
 
<label for="billing_id">Billing ID (Partner ID/GUID):</label> 
 
<input id="billing_id" name="billing_id" type="number" /> 
 
<br> 
 

 
<label for="ips">IP addresses:</label> 
 
<input id="ips" name="ips" type="text" /> 
 
<br> 
 

 
<label for="url">Callback URL:</label> 
 
<input id="callbackurl" name="callbackurl" type="url" /> 
 
<br> 
 

 
<input name="myBtn2" id="myBtn2" type="button" value="Submit Data" /> 
 

 
<label>Partner Name</label> 
 
<br>Please add a partner if not on the list bellow 
 
<br> 
 
<input list="partner" name="partner" type="text"> 
 
<datalist id="partner"> 
 
    <option value="42">42</option> 
 
    <option value="SMS">SMS</option> 
 
    <option value="Online">Online</option> 
 
</datalist> 
 
<br>

Answer 2

http://caniuse.com/#feat=datalist

相反的DataList的，請嘗試使用select標籤來代替。

<select name="partner" id="partner"> 
    <option value="">Please select</option> 
    <option value="42">42</option> 
    <option value="SMS">SMS</option> 
    <option value="Online">Online</option> 
</select> 

Answer 3

你需要給id="partner"到input沒有datalist。
像這樣：

<input id="partner" list="partner" name="partner" type="text"> 
<datalist> 
    <option value="42">42</option> 
    <option value="SMS">SMS</option> 
    <option value="Online">Online</option> 
</datalist> 

相反的：

<input list="partner" name="partner" type="text"> 
<datalist id="partner"> 
    <option value="42">42</option> 
    <option value="SMS">SMS</option> 
    <option value="Online">Online</option> 
</datalist> 

DEMO

更新

你可以給一些其他的id到input，像下面

<input id="partner12" list="partner" name="partner" type="text"> 
<datalist id="partner"> 
    <option value="42">42</option> 
    <option value="SMS">SMS</option> 
    <option value="Online">Online</option> 
</datalist> 

UpDated Demo