CODEWITHSUNDEEP
javascripttwitter-bootstrapdrop-down-menu
Coleen
Coleen

Reputation: 124

Default Value for Dropdown in JavaScript

I'm using JavaScript for an editable table in Bootstrap. Three of the columns are dictated by dropdown values. When the values are "saved" they are converted into their proper text values, but I'm having trouble keeping their saved dropdown choices as the "default" when they come back to edit.

For example: They enter '3' in their dropdown and save it. If they want to go back and edit (likely another field in the table), the dropdown that once held 3 now goes back to the default of 1.

Here's my code for edit:

function Edit() { 
    var par = $(this).parent().parent(); //tr 
    var tdDate = par.children("td:nth-child(1)"); 
    var tdCellNum = par.children('td:nth-child(2)');
    var tdButtons = par.children("td:nth-child(3)");                 
    tdDate.html("<input type='date' id='txtDate' value='"+tdDate.html()+"'/>"); 
    tdCellNum.html("<select id='txtCellNum'><option value=1>1</option>
    <option value=2>2</option><option value=3>3</option></select>");
    tdButtons.html("<img src='save.png' class='btnSave'/>");

Any idea on how to get the value from tdCellNum to display as the default in the dropdown?

I've tried setting the value of select =tdCellNum and tdCellNum.val and using Number to convert the object to a number.I've also tried setting a var=tdCellNum with the rest of the variables, then document.getElementById("tdCellNum").value=copyValue.html(); along with tdCellNum.val=copyValue but all to no avail.Any ideas?? Thanks!

Upvotes: 0

Views: 66

Answers (2)

epascarello
epascarello

Reputation: 207511

Better to create the element and append it. This way you can use .val() to select the option.

var sel = $("<select id='txtCellNum'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>");
sel.val(tdCellNum.text());
tdCellNum.empty().append(sel);

Upvotes: 1

Jan Jouke Tjalsma
Jan Jouke Tjalsma

Reputation: 610

You can use tdCellNum.text() to get the value in the field.

Then you could do:

tdCellNumInt=tdCellNum.text();
tdCellNum.html("<select id='txtCellNum'><option value=1>1</option> <option value=2>2</option><option value=3>3</option></select>");
tdCellNum.find("option[value='"+tdCellNumInt+"']").prop("selected",true);

Upvotes: 0

Related Questions