jsonfying the select box options

Question

I've a server side query which generically generated all select box options in the form

<option val='1'> text1 </option>
<option val='2'> text2 </option>
<option val='3'> text3 </option>
<option val='4'> text4 </option>
<option val='5'> text5 </option>

Now I want to convert all of this to a format that jqgrid understands for its dropdowns. i.e. {1:text1, 2:text2....} Condition is that I would not touch the server side code. I need to modify it here at client side by adding a generic function. Now I get this through an jquery ajax call

 getGridDropDown: function (url) {
        $.ajax({
      type: "GET",
      url: url,
      dataType: "html",
      success: function (html) {
         $(html).find('option').each(function(key){
             alert(key)
         })


      },
      error: function () {
        console.log("Error in ajax call to url:  " + url);
      }
    });
 },

Now I tried various formats, the only way looks like using regexp is the only way. Can't I handle the html return variable as a jquery variable, where I can say $this.val() + this.text()

Does your AJAX call return only the ` – Frédéric Hamidi Oct 20 '11 at 12:14 — Frédéric Hamidi, Oct 20 '11 at 12:14
@SaiKrishna well, if any of the answers worked tick it :) – Val Oct 20 '11 at 14:30 — Val, Oct 20 '11 at 14:30

score 1 · Answer 1 · answered Oct 20 '11 at 12:15

1

To use find the returned html needs a valid root element.

Try the following:

$("<div/>").append(data).find('option')

Example on jsfiddle

answered Oct 20 '11 at 12:15

Mark Coleman

40,542
9
81
101

score 1 · Answer 2 · answered Oct 20 '11 at 12:16

1

var obj;
$('option').each(function (i,n){
   obj[i] = $(n).text();
});

console.log(obj);//outputs your info... on your console

I think this, should do it, but fix the selector so u have #select_tag_id option

answered Oct 20 '11 at 12:16

Val

17,336
23
95
144

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

If your server can generate the list of <options> inside of <select> you can use directly dataUrl in the editoptions or searchoptions.

If your server can only generate the list of <options> without <select> and </select> and you can't change the behavior on the server side you can use buildSelect to fix the problem:

editoptions: {
    dataUrl: 'yourUrl',
    buildSelect: function (data) {
        return "<select>" + data + "</select>";
    }
}

(in case of usage of old version of jqGrid it could be required to test the typeof(data) and use data or data.responseText)

The usage of ajaxSelectOptions: { cache: false } could be also required (see here)

edited May 23 '17 at 12:12

Community

1
1

answered Oct 20 '11 at 13:01

Oleg

220,925
34
403
798

1

@Sai Krishna: You are welcome! Do you tried this? Is it work in your environment? – Oleg Oct 20 '11 at 14:41
Awesome, I tried. it works better than my fix. my fix is adding undefined as one of the param – J Bourne Oct 21 '11 at 07:55
This works great, but I'm somehow trying to add in the same place an input type=hidden element which stores the selected value. I added this to editoptions `dataEvents: [ { type: 'change', fn: function(e) { console.log(e); html = ''; return html; }}, ]` , but this does not work. Can you help me in achieving this? Thank You – J Bourne Nov 11 '11 at 07:55
@SaiKrishna: the event handler of `change` event should not return HTML fragment. I don't understand what you want to make. Moreover the main purpose of the stackoverflow **to share good question and helpful answers with other people**. New questions from comments will be very bad found. So I suggest you to ask *new question* where you describe carefully your problem. – Oleg Nov 11 '11 at 08:15

score 0 · Answer 4 · answered Oct 20 '11 at 14:30

it was quiet easy. A simple trick did

getGridDropDown: function (url) {
        $.ajax({
          type: "GET",
          async:false,
          url: url,
          dataType: "json",
          success: function (html) {
             data = new String();
             $(html).each(function(key){

/* jqgrid select options format */

     data += this.value +":"+this.label+";";
             })
           gridParams['data'] = data     
          },
          error: function () {
            console.log("Error in ajax call to url:  " + url);
          }
        });
     },

Thank you for your answers

jsonfying the select box options

4 Answers4

Linked