2

I'm using jQuery and jqGrid.

I'm trying to populate a select list dynamically, one for each row and I need to add a click event to it. When the select list is being populated I grab the index of the item I want selected, and then after all items are add I'm trying to set the selected item.

I've tried

$("#taskList")[0].selectedIndex = taskIndex;
$("#taskList").selectOptions(taskIndex, true);
$("#taskList").val(1); //Tried to see if I could select any index and no luck.
$("#taskList option[value=" + taskIndex + "]").attr("selected", true);

So this means I'm probably populating the list incorrectly...

var taskList = document.createElement("select");
var taskIndex = 0;
for (var i = 0; i < result.TaskTypes.length; i++) {
   $(taskList).addOption(result.TaskTypes[i].TaskId, result.TaskTypes[i].TaskName);
   if (result.TaskTypes[i].TaskName == rowData.TaskType)
    taskIndex = i;
}

Is there a better way?

I tried this but I couldn't add the click event to it. The proper item was selected though.

var taskList = "<select name='taskList' Enabled='true'>";
for (var i = 0; i < result.TaskTypes.length; i++) {
    if (result.TaskTypes[i].TaskName == rowData.TaskType)
        taskList += "<option selected> " + result.TaskTypes[i].TaskName + "</option>";
    else
    taskList += "<option>" + result.TaskTypes[i].TaskName + "</option>";
}
taskList += "</select>";

4 Answers 4

4

The way I would have done it, is in your first example - instead of using the jQuery API for addOption, use the DOM API, like this:

var option = document.createElement("option");
option.innerHTML = result.TaskTypes[i].TaskName;
option.value = result.TaskTypes[i].TaskId;
option.onclick = myClickHandler;
taskList.add(option, null);

Then after the loop you can just use:

taskList.selectedIndex = taskIndex;

to have the select list positioned to your required default selection.

I haven't used jQuery extensively, but I think its a good idea not to neglect the DOM API - its often not as convenient as the shortcuts that jQuery and other libraries offer, but these extend DOM capabilities and should not come instead of the DOM.

9
  • Not working... taskList.add(option); threw an exception. "htmlfile: Invalid argument." Changed to $(taskList).add(option); Its not adding items to taskList after I changed it. Checked and innerHTML and Value are being set. Ideas??
    – Brad8118
    Feb 27, 2009 at 16:11
  • I get a failure with add() as well, not sure why - its a documented API. Anyway, the DOM method appendChild() works great for me.
    – Guss
    Feb 27, 2009 at 16:30
  • eh. You probably want to use taskList.add(option,null) to add an option to the bottom of the list. Calling it with a single parameter doesn't work indeed (I was under the assumption that the last parameter is optional and defaults to null).
    – Guss
    Feb 27, 2009 at 16:35
  • Good news bad news.... Good- appendChild() works. Bad - Still can't set what item I want selected. --> awesome :(
    – Brad8118
    Feb 27, 2009 at 16:41
  • I've just edited my answer, and I think you'll find all the details you need in there :-)
    – Guss
    Feb 27, 2009 at 16:41
2

You can set the selected index like this:

$("#taskList").selectedIndex = taskIndex;
5
  • Ah, you don't have id="taskList" on your select - that's why it's not working
    – Greg
    Feb 27, 2009 at 16:26
  • Indeed, this should probably solve the issue if you just add id="taskList" to the select element.
    – rfunduk
    Feb 27, 2009 at 16:44
  • Tried var taskList = document.createElement("select"); $(taskList).attr({ id: "taskList" }); no luck
    – Brad8118
    Feb 27, 2009 at 17:15
  • Put the id in your markup. If you must do it via JavaScript then you're looking for one of: $('<select id="taskList"/>') or, if you already have the element: taskList.attr('id', 'taskList'). Look up for the documentation for 'attr' if you're still confused (this is a good idea anyway, actually :)).
    – rfunduk
    Mar 5, 2009 at 18:28
  • Ya, I generally try to do this. Tried but having the ID defined didn't help. I end up adding an OnClick in the markup. Thanks though.
    – Brad8118
    Mar 9, 2009 at 18:43
2

Falling under the "better way" category, JQuery lets you use an each loop instead of creating the for loops manually.

jQuery.each(result.TaskTypes, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });
1
  • Tried this too. No luck. Quick question about the "$("#" + i)." How does it know what element to append to. I would need to do something like this.. $("#taskList " + i) ??? thanks
    – Brad8118
    Feb 27, 2009 at 16:22
0

Got it- a good solid 8 hours later.

var taskList = "<select name='taskList' Enabled='true' onClick='$(\"#hoursBx\").valid()' >";
for (var i = 0; i < result.TaskTypes.length; i++) {
    if (result.TaskTypes[i].TaskName == rowData.TaskType)
        taskList += "<option selected> " + result.TaskTypes[i].TaskName + "</option>";
    else
        taskList += "<option>" + result.TaskTypes[i].TaskName + "</option>";
}
taskList += "</select>";

I'm using jQuery's Validator to verify the value in the $("#hoursBx") (a text box in the current row).

Adding the onClick works.

1
  • 1
    String concatenation can be slow in a 'for' loop instead append to an array and join at the end var htmlArray = []; htmlArray.push("<option selected>",text,"</option>"); var html = htmlArray.join("");
    – Eric
    Nov 29, 2012 at 0:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.