Question

接下来是html for text，button，select elements：

<input type="button" id="addNextProjectID" value=" Add next project"/>
<input id="setNewProjectID" type="text" value=" project name "/>
<br>
 <select id="selectProjectID" onfocus="onFocusSelectProject()">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
 </select>
</br>

在按钮单击

上添加选项以从文本元素中选择元素的代码

function addNextProjectF(){
var x = document.getElementById("selectProjectID");
var option = document.createElement("option");
option.text = document.getElementById("setNewProjectID").value;
option.id = document.getElementById("setNewProjectID").value;
x.appendChild(option);
}

如何对所有选项进行字符串化，将它们粘贴到Json变量，然后再将它们解析回选择元素。

我的Select元素有前2个从html设置的选项。我需要保留它们。在这里我想的方法是循环选择元素选项和＆＃34;追加＆＃34;每个选项到Json并反转然后重新填充选择元素。但我还没有遇到任何代码的情况。你能帮我解释一下这段代码吗？

案例还有，我不确定如何使用ajax中的成功函数来填充select的选项。无论如何，也许我正在考虑完全错误的方法来得到我需要的结果。那么如何进行？

下一个（下面的代码）试试我

{＆＃34; 0＆＃34;：{}，＆＃34; 1＆＃34;：{}，＆＃34; 2＆＃34;：{}}

DB中的空字段。我推测＆＃34; JSON.stringify（saveToprojectsList）＆＃34;是错的。

function saveToProjectsListF(){
  whichProjectToSave=document.getElementById("selectProjectID").value;
  saveToprojectsList=document.getElementById("selectProjectID");
  var jsonProjectsListToPHP= JSON.stringify(saveToprojectsList);

  console.log(jsonProjectsListToPHP);
   $.ajax({
   method:"POST",
   url: '/wp-content/themes/mypage/PsaveJson.php',
   data: {
     "sendProjectsList":1,
     "whichProjectToSave":whichProjectToSave,
    "jsonProjectsListToPHP":jsonProjectsListToPHP
     },
    success: function(data){
    }
   });
}

Answer 1

问题相当广泛，因此我只关注您尝试使用代码解决问题的部分，即在选择列表中对选项进行字符串化。

该代码无法正常工作，因为saveToprojectsList是一个DOM对象，当您尝试将其字符串化为JSON时，它只会产生一个空对象。您可以使用map提取option代码的文本内容。

注意：当您使用jQuery $.ajax时，您也可以在其他地方使用它：

＆＃13;

function onFocusSelectProject() {}

$('#addNextProjectID').click(function addNextProjectF(){
    var value = $("#setNewProjectID").val();
    $("#selectProjectID").append($("<option>").text(value).attr("id", value));
});

$('#save').click(function saveToProjectsListF(){
    var whichProjectToSave = $("#selectProjectID").val();
    var saveToprojectsList = $.map($("#selectProjectID>option"), function (op) {
        return $(op).text();
    });
    var jsonProjectsListToPHP = JSON.stringify(saveToprojectsList);
    console.log(jsonProjectsListToPHP);
    $.ajax({
        method:"POST",
        url: '/wp-content/themes/mypage/PsaveJson.php',
        data: {
            sendProjectsList: 1,
            whichProjectToSave: whichProjectToSave,
            jsonProjectsListToPHP: jsonProjectsListToPHP
        },
        success: function(data){
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="addNextProjectID" value=" Add next project"/>
<input id="setNewProjectID" type="text" value=" project name "/>
<br>
 <select id="selectProjectID" onfocus="onFocusSelectProject()">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
 </select>
<input type="button" id="save" value="Save"/>
</br>

＆＃13;

保存并从Json中检索select元素的选项

1 个答案: