Select a HTML Selection field based on a JavaScript Variable Value?

Question

I am editing an existing Smarty Template that has JavaScript like below which builds a portion of the page.

In the code snippet of JavaScript below you can see a Value for an HTML Input field is set with this JavaScript variable var priority

var priority = 'Urgent';

e.innerHTML += '<input name="priority_'+num+'" id="priority_'+num+'" size=6 type="text" value="'+priority+'" class="priority">';

In my template file there is many different variables and sections very similar to this one posted above. if i can get help with this one, then i can apply the changes across all my other ones so there is no need to post them all here.

What I need to do is replace this text input field with a Dropdown Selection field and then also have the correct value to be selected based on the value of the var priority variable.

So the new field would look something like this instead of the old text input field shown above...

e.innerHTML += '<select name="priority_'+num+'" id="priority_'+num+'">
  <option value="Low">Low</option>
  <option value="Medium">Medium</option>
  <option value="High">High</option>
  <option value="Urgent">Urgent</option>
</select>';

But I would then need to have the value of this JavaScript variable var priority to have the correct selection value SELECTED

I would appreciate any help I can get with this please?

---

---

UPDATES

After trying out a couple ideas from the comments I have realized I need to go ahead an post more of my code and explain more as it seems to be a bit more complex than I had thought originally.

So below is a JavaScript function that gets called which inserts a Row of HTML form inputs and selections each time the Function is called. It not only inserts this row into the DOM but if currecnt values are supplied, it then populates the Values for each field as well. The problem is it is currently only text input fields and I am trying to convert a few of the text fields into Selection fields.

<script type='text/javascript'>

var project_tasks = new Array();
var priotities = ['Low', 'Medium', 'Urgent'];


YAHOO.util.Event.onDOMReady(function(){
                // code iterates my PHP and calls this for each existing Tasks row to add and
                // Load in all the existing Tasks for this record.
                add_task_row("","fgsdgsdfjhg","gsdgsdfhjgh","hsdgsdfj","Low","klk");
                add_task_row("","sdgsdfgdfg","dfgsdfgsdfg","dfgdsfg","Urgent","hlf");

});


function add_task_row(taskid,name,description,status,priority,type){
    var ii = document.getElementById("project_tasks");
    var num = document.getElementById("tasks_count").value;
    num++;


    var e = document.createElement("div");
    e.setAttribute('id','task_'+num);

    //e.innerHTML =  '<input name="taskID_'+num+'" id="taskID_'+num+'" size=0 type="hidden" value="'+taskID+'">';

    // Add an ID
    e.innerHTML =  '<div style="float: left; width: 111px;"><input name="taskid_'+num+'" id="taskid_'+num+'" size=9 type="text" value="'+taskid+'"></div>';

    e.innerHTML +=  '<div style="float: left; width: 400px;"><input name="name_'+num+'" id="name_'+num+'" size=45 type="text" value="'+name+'"></div>';
    e.innerHTML += '<div style="float: left; width:  400px;"><input name="description_'+num+'" id="description_'+num+'" size=45 type="text" value="'+description+'"></div>';
    e.innerHTML += '<div style="float: left; width:  90px;"><input name="status_'+num+'" id="status_'+num+'" size=5 type="text" value="'+status+'"></div>';
    //e.innerHTML += '<div style="float: left; width:  90px;"><input name="priority_'+num+'" id="priority_'+num+'" size=6 type="text" value="'+priority+'" class="priority"></div>';
    e.innerHTML += '<div style="float: left; width:  90px;"><select name="priority_'+num+'" id="priority_'+num+'" class="priority"><option value="Low">Low</option><option value="Medium">Medium</option><option value="High">High</option><option value="Urgent">Urgent</option></select></div>';
    e.innerHTML += '<div style="float: left; width:  90px;"><input name="type_'+num+'" id="type_'+num+'" size=4 maxlength=6 type="text" value="'+type+'"></div>';
    e.innerHTML += '<div style="float: left; width:  30px;"><button type="button" onclick="remove_item_row('+num+')"><img src="index.php?entryPoint=getImage&imageName=id-ff-clear.png"></button></div>';
    e.innerHTML += '<br style="clear:both;">';

    document.getElementById("tasks_count").value = num;
    ii.appendChild(e);


}

What this function does above, is when I click a button to add a new Task, it calls this function and leaves each Function Variable empty which results in a new Task row inserted into teh DOM and each input is empty and ready for me to type in new values.

Now when the page loads, it first iterates over an array of values and call this function for each Tasks in the array, it then sets the Value for each inputs based on the value in the Tasks array.

So you can see this same code works for adding new Tasks rows and editing existing Tasks rows.

I just need to be able to convert some of the text input fields into selection fields and then still be able to set the value for them on existing Tasks records that are loaded.

Hopefully this makes some sort of sense. Thanks for all help!

Answer 1

The approach I'd go for is to create a separate function that generates the select options...exactly the same way you're doing it now by generating the html string, except that this function will "insert" the output html between the opening and closing select tag...

var priorities = ['Low', 'Medium', 'Urgent'];

function createOptions(selectedPriority){
    var options = '';
    for(var i = 0; i < priorities.length; i++){
        options += "<option value='" + priorities[i] + "' " 
        + (selectedPriority == priorities[i] ? "selected='selected'" : "")
        + ">" + priorities[i] + "</option>";
    }

    return options;
} 

this is just to give you an idea. You probably don't need the selectedPriority argument since you already have the priority variable which I believe is accessible within this scope. Now, you will run this function when you are generating the select HTML as below...

e.innerHTML += "<select name='priority_" + num + "' id='priority_" + num + "'>" +
                createOptions(num) +
               "</select>";