JavaScript의 Combobox 항목의 텍스트 표시() 표시

Question

javascript 파일에서 동적으로 콤보를 만드는 양식이 있습니다. 콤보 상자 항목이 변경되면 콤보 바로 아래에 도움말 텍스트 정렬을 표시하려고합니다.

아래 그림과 같이 콤보 (ID : WhereOperatorCombo)를 만들고 이벤트 리스너를 추가했습니다.

$("#lot").append(
      "<h5> Select an Operator </h5>"+ 
      "<div class='col-md-12'>"+ 
      "<select id='WhereOperatorCombo' name='WhereOperatorCombo' class='form-control'>"+ 
      "<option value='Select an option'>Select an option</option>"+ 
      "<optgroup label='--Comparison Operators--'>"+ 
       "<option value='equal'>=</option>"+ 
       "<option value='notequal'>!=</option>"+ 
       "<option value='gt'>"+gt+"</option>"+ 
       "<option value='lt'>"+lt+"</option>"+ 
       "<option value='gte'>"+gte+"</option>"+ 
       "<option value='lte'>"+lte+"</option>"+ 
       "<option value='ngt'>"+ngt+"</option>"+ 
       "<option value='nlt'>"+nlt+"</option>" 
    ); 

    $("#WhereOperatorCombo").append(
       "<optgroup><optgroup label='--Logical Operators--'>" 
    ); 


    for (var k = 0; k < logicalOperatorListArray.length; k++) 
    { 
     $("#WhereOperatorCombo").append(
        "<option value="+logicalOperatorListArray[k]+">"+logicalOperatorListArray[k]+"</option>"        
     ); 
    } 

    $("#WhereOperatorCombo").append(
       "</optgroup></select>" + 
       "<div id='onchangeDefinition' class='col-md-12'></div>"+ 
       "</div>"        
    ); 

    document.getElementById("WhereOperatorCombo").addEventListener("change", function() { 
     displayValueinput(); 
    }, false); 

displayValueinput() 메소드

function displayValueinput() 
{ 
    var myNode = document.getElementById("onchangeDefinition"); 
    var fc = myNode.firstChild; 

    while(fc) { 
     myNode.removeChild(fc); 
     fc = myNode.firstChild; 
    } 

    var choice=document.getElementById("WhereOperatorCombo"); 
    var selectedOperator = choice.options[choice.selectedIndex].text; 

    if(selectedOperator == "=") 
    {  
     $("#onchangeDefinition").append(
        "<h5> This operator filters the records that are equal the value that you provide</h5>"        
     ); 
    } 

    else if(selectedOperator == "!=") 
    {  
     $("#onchangeDefinition").append(
        "<h5> This operator filters the records that are NOT equal the value that you provide</h5>"        
     ); 
    } 
... 

하지만이 직면하고있는 문제는 아무것도 onchangeDefinition 부문에 표시되지되고 있다는 점이다.

if(selectedOperator == "!=") 결정 내에서 경고가 표시되면서 해당 블록을 통과하는지 여부를 확인하고 알림을 받고 있습니다. 그러나 도움말 텍스트는 내가 의도 한대로 부서에 추가되지 않습니다.

이 점에 대한 제안은 높이 평가 될 것입니다.

Answer 1

select 요소 외부에 onchangeDefinition div를 추가하십시오.

$("#WhereOperatorCombo").closest('div').append() 

$("#lot").append(
 
    "<h5> Select an Operator </h5>" + 
 
    "<div class='col-md-12'>" + 
 
    "<select id='WhereOperatorCombo' name='WhereOperatorCombo' class='form-control'>" + 
 
    "<option value='Select an option'>Select an option</option>" + 
 
    "<optgroup label='--Comparison Operators--'>" + 
 
    "<option value='equal'>=</option>" + 
 
    "<option value='notequal'>!=</option>" + 
 
    "<option value='gt'>gt</option>" + 
 
    "<option value='lt'>lt </option>" + 
 
    "<option value='gte'>gte</option>" + 
 
    "<option value='lte'>lte </option>" + 
 
    "<option value='ngt'> ngt </option>" + 
 
    "<option value='nlt'>nlt</option>" 
 
); 
 

 
$("#WhereOperatorCombo").append(
 
    "<optgroup><optgroup label='--Logical Operators--'>" 
 
); 
 
logicalOperatorListArray = []; 
 

 
for (var k = 0; k < logicalOperatorListArray.length; k++) { 
 
    $("#WhereOperatorCombo").append(
 
    "<option value=" + logicalOperatorListArray[k] + ">" + logicalOperatorListArray[k] + "</option>" 
 
); 
 
} 
 

 
$("#WhereOperatorCombo").closest('div').append(
 
    "</optgroup></select>" + 
 
    "<div id='onchangeDefinition' class='col-md-12'></div>" + 
 
    "</div>" 
 
); 
 

 
document.getElementById("WhereOperatorCombo").addEventListener("change", function() { 
 
    displayValueinput(); 
 
}, false); 
 

 

 
function displayValueinput() { 
 

 
    var myNode = document.getElementById("onchangeDefinition"); 
 
    var fc = myNode.firstChild; 
 

 
    while (fc) { 
 
    myNode.removeChild(fc); 
 
    fc = myNode.firstChild; 
 
    } 
 
    debugger; 
 
    var choice = document.getElementById("WhereOperatorCombo"); 
 
    var selectedOperator = choice.options[choice.selectedIndex].text; 
 

 
    if (selectedOperator == "=") { 
 
    $("#onchangeDefinition").append(
 
     "<h5> This operator filters the records that are equal the value that you provide</h5>" 
 
    ); 
 
    } else if (selectedOperator == "!=") { 
 
    $("#onchangeDefinition").append(
 
     "<h5> This operator filters the records that are NOT equal the value that you provide</h5>" 
 
    ); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="lot"></div>