Question

我没有注意到这个版本的组合框... combobox

...我正在尝试获取菜单项，然后创建一个json数组，这是我到目前为止提出的代码......

"keyup .ui-combobox-input":function(event){
    if(event.keyCode==13){
            event.preventDefault();
            newItem=$(this.uiInput).val()
            this.element.append('<option value="'+newItem+'">'+newItem+'</option>');
            var text=JSON.stringify(this.element.text());
    };
}

我从var text得到的输出是......

"\n\t\t\t\t\t\t\t\t\t\t\tone moretwothreefour"

但我想要这个...

[{"value":"1", "label":"one more"}, {"value":"2", "label":"two"}, {"value":"3", "label":"three"}, {"value":"4", "label":"four"}]

我不知道转义的n和t是什么，当我尝试使用此text=$.parseJSON(text);文本将文本转换为数组时，不会将其转换为数组。

Answer 1

我不完全确定您的代码，因为有多个对此属性的引用。但根据我的理解，你可以做的是如下。

1）选择list / combobox

       <div class="ui-widget" id="test">
         <label>Your preferred programming language: </label>
           <select id="combobox">
             <option value="ActionScript">ActionScript</option>
             <option value="AppleScript">AppleScript</option>
           </select>
       </div>

2）组合框的键盘事件

    $(".ui-combobox-input").keyup(function(event){
        if(event.keyCode==13){
                event.preventDefault();

              //This gives the value being entered in text field on dropdown 
                var textVal = $(".ui-combobox-input").val();

              //var dd = $('#combobox').val();  
              //this.element.append('<option value="'+newItem+'">'+newItem+'</option>'); **THIS did not work for me**

                var combobox = []
                $('#combobox').append($('<option>', {value:textVal, text:textVal, selected:true})); //USE SELECTED:TRUE if you want dynamically added value to be selected Please TEST it if its getting selected or not

                $('#combobox > option').each(function() {
                   combobox.push(
                      {
                         value: $(this).val(), 
                         label: $(this).text()
                      })
                   });

                jsonString = JSON.stringify(combobox);
                alert(jsonString);
        };
    });
 });

您可以对上面的代码进行的其他改进是使用ID进行DIV持有下拉列表并更新该元素的相关keyup。（如果你在同一页面上有多个这样的元素）。为元素使用唯一有意义的名称。我刚刚在上面的代码中使用了随机名称。我希望它有所帮助。

Answer 2

我不确切地知道你要做什么，但你可以用JQuery做到这一点。您可以遍历选择列表项并创建JSON对象。

var combobox = []

$('select option').each(function() {
   combobox.push(
      {
         value: $(this).val(), 
         label: $(this).text()
      })
   });

jsonString = JSON.stringify(combobox);
alert(jsonString);

这将打印出来：[{"value":"1","label":"one"},{"value":"2","label":"two"}]

希望这有帮助！

这是一个JSFiddle：doc

jquery ui combobox从菜单项创建数组

2 个答案: