在 JavaScript 中显示 Combobox 项目的文本 onchange()

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>"                               
       );
    }
...

But the issue that I am facing is that nothing is being displayed in the onchangeDefinition division.

我尝试在 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>

在 JavaScript 中显示 Combobox 项目的文本 onchange()

Display text onchage() of Combobox item in JavaScript

html

javascript

combobox

onchange

addeventlistener