时间戳

首页 > 解决方案 > 从每次都会更改的文本框的值创建一个组合框

javascript - 从每次都会更改的文本框的值创建一个组合框

问题描述

<html>
   <head>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   </head>
   <body>
      <input name="textbox2" id="edValue" type="text" onInput="edValueKeyPress()"><br>
      <input name="textbox3" id="textbox3"  ><br>
      <p/>
   </body>
   <script type="text/javascript">
      function edValueKeyPress() {
       var edValue = document.getElementById("edValue");
       var s = edValue.value;
       textbox3.value=s.concat('world');;
      }    
   </script>
   <script type="text/javascript">
      $(document).ready(function() {

          var data = {  'Country1': 'Sri Lanka', 'Country2': 'USA', 'Country3': 'Australia', 'Country4': 'Newzeland'};

          var s = $('<select id="combo" />');

          for(var val in data) {
              $('<option />', {value: val, text: data[val]}).appendTo(s);
          }
          s.appendTo('p');    

          //when we select an item from dropdown or combobox then alert that value
          $(document).on('change',"#combo", function(){
              alert(this.value);
          });
      });

   </script>
</html>

我想填充一个像下面这样的组合框，在 textbox3 中的每次更改值时，每次都会更改 textbox2

<select id="combo">
    <option value="Country1">Sri Lanka (value from textbox3) </option>
    <option value="Country2">USA (value from textbox3) </option>
    <option value="Country3">Australia (value from textbox3)</option>
    <option value="Country4">Newzeland (value from textbox3)</option>
</select>

这意味着每次组合框值都应随文本框值而变化。

现在仅更改仅影响 textbox3 仅

标签： javascriptphpjqueryajax

解决方案

希望这对您有所帮助。

function edValueKeyPress() {
  var edValue = document.getElementById("edValue");
  var s = edValue.value;
  textbox3.value = s.concat('world');
  var getValueTextbox = document.getElementById("textbox3").value;
  make_combobox(getValueTextbox);
}

make_combobox('');

function make_combobox(textbox) {
  $('#combo').remove();
  var data = {
    'Country1': 'Sri Lanka',
    'Country2': 'USA',
    'Country3': 'Australia',
    'Country4': 'Newzeland'
  };

  var s = $('<select id="combo" />');

  for (var val in data) {
    $('<option />', {
      value: val,
      text: data[val] + '=>' + textbox
    }).appendTo(s);
  }
  s.appendTo('p');

  //when we select an item from dropdown or combobox then alert that value
  $(document).on('change', "#combo", function() {
    alert(this.value);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="textbox2" id="edValue" type="text" onInput="edValueKeyPress()"><br>
<input name="textbox3" id="textbox3"><br>
<p/>

推荐阅读