JavaScriptのComboboxアイテムのテキストのonchage（）を表示します。

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

onchangeDefinition divをselectの外側に追加します。

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

あなたはplunkr、問題やフィドルのコードスニペットの例を作成することはできますか？サンプル

$("#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>