JavaScript：使用表單字段填充數組

Question

我正在嘗試使用JavaScript和HTML表單元素填充和解析數組。 以下測試產生預期的結果（目標div中的“ Test1 Test2 Test3”渲染）。 這是工作測試代碼：

<div>
    <span id="put-stuff-here"></span>
    <span id="put-stuff-here2"></span>
    <span id="put-stuff-here3"></span>
</div>

<script type="text/javascript">
    var itemSelected = { 'fields': [ 'Test1', 'Test2', 'Test3' ] }
    document.getElementById('put-stuff-here').innerHTML = itemSelected.fields[0];
    document.getElementById('put-stuff-here2').innerHTML = itemSelected.fields[1];
    document.getElementById('put-stuff-here3').innerHTML = itemSelected.fields[2];      
    })
</script>

但是，當我嘗試使用表單字段定義變量“ itemSelected”時，目標div中沒有​​呈現任何內容。 這是無效的代碼：

<div>
    <form>
        <select id="getItem">
            <option value="{ 'fields': [ 'Test1', 'Test2', 'Test3' ] }">ItemName</option>
            <option value="{ 'fields': [ 'Test4', 'Test5', 'Test6' ] }">ItemName2</option>
        </select>
    </form>
</div>

<div>
    <span id="put-stuff-here"></span>
    <span id="put-stuff-here2"></span>
    <span id="put-stuff-here3"></span>
</div>

<script type="text/javascript">
    $("#getItem").change(function () {
        var itemSelected = $(this).val();
        document.getElementById('put-stuff-here').innerHTML = itemSelected.fields[0];
        document.getElementById('put-stuff-here2').innerHTML = itemSelected.fields[1];
        document.getElementById('put-stuff-here3').innerHTML = itemSelected.fields[2];      
    })
    .change();
</script>

由於某些原因，傳遞給“ itemSelected”的值不會作為數組處理。 我希望這里的人會友好地介紹一下，也許會提出解決方案。

謝謝，

-邁克爾

Answer 1

之所以不起作用，是因為select的值是一個string而不是一個object您可以使用jQuery.parseJSON將其轉換為對象。

更改var itemSelected = $(this).val(); 到var itemSelected = $.parseJSON($(this).val());

Answer 2

來自表單的值是一個字符串，這就是為什么它沒有執行您想要的操作。 我建議更改您的表單值：

<select id="getItem">
  <option value="Test1,Test2,Test3">ItemName</option>
  <option value="Test4,Test5,Test6">ItemName2</option>
</select>

然后修改您的事件處理程序：

var itemSelected = $(this).val().split(',');

這將為您提供陣列。 假設fields只是達到目的的一種手段，如果您出於其他原因仍然確實需要它，則只需將數組分配給itemSelected.fields 。