자바 스크립트 변수 값을 기반으로 HTML 선택 필드를 선택 하시겠습니까?

Question

페이지의 일부분을 구성하는 아래 JavaScript와 같은 Smarty 템플릿을 편집 중입니다. 당신이 HTML 입력 필드의 값을 볼 수 아래 자바 스크립트의 코드에서

이 내 템플릿 파일에서이 자바 스크립트 변수 var priority

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

... 대신 위의 오래된 텍스트 입력 필드의 다음과 같이 보일 것이다 그러나 나는 다음 올바른하려면이 자바 스크립트 변수 var priority의 값을 가질 필요가있다 선택 값 선택됨

나는 이것으로 얻을 수있는 도움을 주시면 고맙겠습니다.

---

---

UPDATES

나는 조금 것 같다 나는 앞으로 내 코드의 게시물 더 가서 더 설명 할 필요가 실현 코멘트에서 몇 가지 아이디어를 시도 후 원래 생각했던 것보다 더 복잡합니다.

다음은 함수가 호출 될 때마다 HTML 양식 입력 행과 선택 행을 삽입하는 JavaScript 함수입니다. 이 행을 DOM에 삽입 할뿐만 아니라 currecnt 값이 제공되면 각 필드의 Values도 채 웁니다. 문제는 현재 텍스트 입력 필드 만이고 일부 텍스트 필드를 선택 필드로 변환하려고하는 것입니다. 나는 새로운 작업을 추가 할 수있는 버튼을 클릭하면

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


} 

이 기능은 위의 무엇, 그것은이 함수를 호출하고 TEH DOM에 삽입 된 새로운 작업 행에 결과를 각 기능 변수 빈 나뭇잎이며, 각각의 입력은 비어 있고 새 값을 입력 할 준비가되었습니다.

이제 페이지가로드되면 값 배열을 반복하고 배열의 각 작업에 대해이 함수를 호출 한 다음 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; 
} 

이것은 단지 당신에게 아이디어를 제공 할 수 있습니다. 이 범위 내에서 액세스 할 수 있다고 생각하는 변수 priority을 이미 가지고 있으므로 아마 selectedPriority 인수가 필요하지 않습니다. 당신은 아래와 같이 select HTML을 생성 할 때 지금, 당신은 당신이 공유 링크, ... 공유

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