Question

我正在编辑一个现有的Smarty模板，该模板具有如下所示的JavaScript，用于构建页面的一部分。

在下面的JavaScript代码段中，您可以看到使用此JavaScript变量var priority设置HTML输入字段的值

var priority = 'Urgent';

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

在我的模板文件中，有许多不同的变量和部分与上面发布的变量非常相似。如果我可以得到这个的帮助，那么我可以将更改应用到我所有其他的，所以没有必要在这里发布它们。

我需要做的是将此文本输入字段替换为下拉选择字段，然后根据var priority变量的值选择正确的值。

所以新字段看起来像这样，而不是上面显示的旧文本输入字段......

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>';

但我需要让此JavaScript变量var priority的值具有正确的选择值 SELECTED

我很感激能得到的任何帮助吗？

更新

在从评论中尝试了几个想法后，我意识到我需要继续发布更多我的代码并解释更多，因为它似乎比我原先想象的要复杂一些。

以下是一个被调用的JavaScript函数，每次调用Function时都会插入一行HTML表单输入和选择。它不仅将此行插入DOM，而且如果提供了currentcnt值，则它还会为每个字段填充值。问题是它目前只有文本输入字段，我试图将一些文本字段转换为选择字段。

<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);


}

这个函数在上面做的是，当我单击一个按钮添加一个新的Task时，它调用这个函数并将每个Function Variable留空，这导致一个新的Task行被插入到DOM中，每个输入都是空的并准备好我输入新值。

现在，当页面加载时，它首先遍历一个值数组并为数组中的每个Tasks调用此函数，然后根据Tasks数组中的值为每个输入设置Value。

因此，您可以看到此相同的代码适用于添加新的“任务”行和编辑现有的“任务”行。

我只需要能够将一些文本输入字段转换为选择字段，然后仍然可以在加载的现有Tasks记录上设置它们的值。

希望这有点道理。谢谢大家的帮助！

Answer 1

我要采用的方法是创建一个单独的函数来生成select选项......与现在生成html字符串的方式完全相同，除了此函数将“在开始和结束select标签之间插入“输出html ...

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;
}

这只是为了给你一个想法。您可能不需要selectedPriority参数，因为您已经拥有我认为可在此范围内访问的priority变量。现在，您将在生成select HTML时运行此功能，如下所示......

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

根据JavaScript变量值选择HTML Selection字段？

1 个答案: