jquery ui combobox create array from menu items

Question

I'm unsing this version of combobox... combobox

...and I'm trying to get the menu items and then create a json array, here's the code I came up wtih so far...

"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());
    };
}

The out put I get from var text is this...

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

but I want this...

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

I don't get what the escaped n and t's are and when I try to convert text to an array using this text=$.parseJSON(text); text is not converted to an array.

n's and t's are next/new line and tab. Could you provide a link to demo of combobox widget you are using? @JoMojo — pratikpawar
– pratikpawar, Commented Dec 16, 2015 at 19:37
@pratikwebdev thanks for the info... here's the link raw.githubusercontent.com/bseth99/jquery-ui-extensions/master/… — JoMojo
– JoMojo, Commented Dec 16, 2015 at 19:43
yes sorry about that... bseth99.github.io/jquery-ui-extensions/tests/visual/combobox/… — JoMojo
– JoMojo, Commented Dec 16, 2015 at 19:46
Dustins solution will work for getting JSON for list. I believe you are trying to dynamically add a new option in dropdown list if its not present currently right? — pratikpawar
– pratikpawar, Commented Dec 16, 2015 at 20:04
@pratikwebdev yes correct... then I want to update a json file/array. The dynamic part works... the array not so much! — JoMojo
– JoMojo, Commented Dec 16, 2015 at 20:08

pratikpawar · Accepted Answer · 2015-12-16 22:42:05Z

2

I am not sure of your code completely since there are multiple references to this attribute. But from my understanding what you can do is as below.

1) Select 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) Keyup event for combobox

    $(".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);
        };
    });
 });

Other improvement that you could do to above code is using ID for DIV holding dropdown and updating related keyup for that element. (in case if you have multiple such elements on same page). Use unique meaningful names for elements. I have just used random names in above code. I hope it helps.

edited Dec 16, 2015 at 22:42

answered Dec 16, 2015 at 22:28

pratikpawar

2,0982 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pratikpawar Over a year ago

Great! but make sure you check not to add duplicates. Add check to see if element is already in the list. I checked the JS that you are using it does check those cases before making selection. refer it and see if you could accommodate your code within it. @JoMojo

JoMojo Over a year ago

thanks for the suggestions duplicate checking is on the todo list... but you lost me with referring to the JS code. I'm just a hobbyist programmer at best hahaha! But I will see if I can figure out what you're talking about. ;)

Dustin Simerly · Accepted Answer · 2015-12-16 19:46:31Z

1

I don't know exactly what you're trying to do, but you can do this with JQuery. You can iterate through a select list item and create a JSON object.

var combobox = []

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

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

This will print out: [{"value":"1","label":"one"},{"value":"2","label":"two"}]

Hopefully this helps!

Here is a JSFiddle: https://jsfiddle.net/sm6w19cq/

answered Dec 16, 2015 at 19:46

Dustin Simerly

215 bronze badges

5 Comments

JoMojo Over a year ago

Thanks for the info didn't know you could do that with jquery. But when I try in within the widget I get the same text output which I can't figur out what to do with.

Dustin Simerly Over a year ago

Is it possible to get a JSFiddle? or at least your HTML?

pratikpawar Over a year ago

Mojo assign an ID (eg. testID) to your select list in HTML code and slightly modify Dustins code to this. $('#testID> option').each(function(). Verify if you are getting newly added value in this.

Dustin Simerly Over a year ago

I know the issue... this.element.text() gets the text for the whole SELECT element, not the OPTION that you just appended, so it's getting all options as one string, hence the new lines, etc.. You need to do something like this after you add the new option: var option = $('select option:last'); and then var text=JSON.stringify( {value: option.val(), label: option.text()}); As can be seen here: jsfiddle.net/t5mu3paq/1

JoMojo Over a year ago

@DustinSimerly thanks for the help even though I accepted the pratikwebdev's answer your's was a close second and I learnt a few new things ;)

Collectives™ on Stack Overflow

jquery ui combobox create array from menu items

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related