2015-12-16 3 views
1

Я unsing этой версии комбобоксе ... comboboxJQuery UI выпадающего создать массив из пунктов меню

... и я пытаюсь получить пункты меню, а затем создать массив 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()); 
    }; 
} 

из положить, я получаю от вара текста это ...

"\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"}] 

Я не понимаю, что сбежавший п и т являются и когда я пытаюсь преобразовать текст в массив с помощью этого text=$.parseJSON(text); текст не преобразуется в массив.

+0

n и t являются следующей/новой строкой и вкладкой. Не могли бы вы предоставить ссылку на демонстрацию виджета combobox, который вы используете? @JoMojo – pratikpawar

+0

@pratikwebdev спасибо за информацию ... вот ссылка https://raw.githubusercontent.com/bseth99/jquery-ui-extensions/master/ui/jquery.ui.combobox.js – JoMojo

+0

да простите об этом. .. http://bseth99.github.io/jquery-ui-extensions/tests/visual/combobox/value.html – JoMojo

ответ

2

Я не уверен, что ваш код полностью, так как есть несколько ссылок на этот атрибут. Но из моего понимания, что вы можете сделать, как показано ниже.

1) Выбрать список/выпадающего

 <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) KeyUp событие для комбобоксе

$(".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 для этого элемента. (если у вас несколько таких элементов на одной странице). Используйте уникальные значащие имена для элементов. Я только что использовал случайные имена в приведенном выше коде. Я надеюсь, что это помогает.

+0

Спасибо, что сработал! – JoMojo

+0

Отлично! но убедитесь, что вы проверяете, чтобы не добавлять дубликаты. Добавьте проверку, чтобы увидеть, находится ли элемент в списке. Я проверил JS, что вы используете, он проверяет эти случаи, прежде чем делать выбор. обратитесь к нему и убедитесь, что вы можете разместить свой код внутри него. @JoMojo – pratikpawar

+0

спасибо за предложения, что повторная проверка находится в списке задач ... но вы потеряли меня со ссылкой на JS-код. Я просто программист-хобби в лучшем случае хахаха! Но я посмотрю, смогу ли я понять, о чем вы говорите. ;) – JoMojo

1

Я не знаю точно, что вы пытаетесь сделать, но вы можете сделать это с помощью 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: https://jsfiddle.net/sm6w19cq/

+0

Спасибо за информацию, не знаю, что вы можете сделать это с помощью jquery. Но когда я пытаюсь войти в виджет, я получаю тот же вывод текста, который я не могу понять, что делать. – JoMojo

+0

Можно ли получить JSFiddle? или, по крайней мере, ваш HTML-код? –

+0

Mojo назначает идентификатор (например, testID) вашему списку выбора в HTML-коде и слегка модифицирует код Dustins. $ ('# testID> option'). each (function(). Убедитесь, что вы получаете новое добавленное значение. – pratikpawar

Смежные вопросы