如何将输入字段转换为选择选项？

Question

有没有什么方法可以将input type="text" 标签转换成选择选项？意味着在下面的 sn-p 中有一个包含一些值的输入字段，但是是否有任何方法可以单击此文本字段然后将其转换为选择选项。当我从选择选项中选择任何选项时，它将再次变为文本字段。（此字段不是可编辑字段*）

$("#textfield1").on("click",function(){
  $("#textfield1").html('<select id= "selct option"><option>1</option><option>2</option><option>10</option></select>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder = "click on me" id="textfield1" value= "10">

Answer 1

你不能这样做，因为input和select都是不同的标签，两个标签的属性也不同。

$("#textfield1").on("click",function(){
  $("#mainNode").html('<select id= "selct option"><option>1</option><option>2</option><option>10</option></select>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainNode">
<input type="text" placeholder = "click on me" id="textfield1" value= "10">
<div>

Answer 2

我不知道你想做什么。

这是一个双方改变的例子。

如果有更多信息，我会调整我的答案。

$(document).on("click",'input',function(){
  var val = $(this).val();
  $(this).replaceWith('<select id="selctoption"><option value="1">1</option><option value="5">5</option><option value="'+val+'" selected>'+val+'</option></select>');
  });
$(document).on("change",'select',function(){
  $(this).replaceWith('<input value="'+$(this).val()+'"/>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder = "click on me" id="textfield1" value= "10">

Answer 3

你不能做你想做的事，因为这两个标签是非常不同的。

这里有几个可能适合您的选项。

编辑：修正了第二个选项

选项 1

选择元素中的硬代码然后根据需要显示和隐藏。

//On Focus Of Texbox swap to select, this also caters for tabbing in
$("input[type='text'].hdnSelect").on("focus", function(){
  //hide this
  $(this).hide();
  
  //Show the next select
  $(this).next(".hdnSelect").show();
  
  //Set the correct value
   $(this).next(".hdnSelect").val($(this).val());
});

//Swap back on select or blur of select and set value
$("select.hdnSelect").on("blur change", function(){

  //Reset the value of the text box
  $(this).prev(".hdnSelect").val($(this).val());
  
  //Show The text box
  $(this).prev(".hdnSelect").show();
  
  //HIde this select
  $(this).hide();
});

select.hdnSelect{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" value="10" id="txt1" class="hdnSelect">
  <select id="hdnSelect1" class="hdnSelect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="10">Ten</option>
  </select>
  <br><br>
    <input type="text" value="1" id="txt2" class="hdnSelect">
  <select id="hdnSelect2" class="hdnSelect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="10">Ten</option>
  </select>

</form>

选项 2

使用数据属性来保存您的元素值并从那里动态构建

//On Focus Of Texbox build select, this also caters for tabbing in
    $("input[type='text'].hdnSelect").on("focus", function(){
      //hide this
      $(this).hide();
      
      //Get raw options
      var opts = $(this).data("options").split(",");
      
      //Build Select
      var sel = document.createElement("select");
      var opt = "";
      
      opts.forEach(function(element){
        var kv = element.split("|");
        opt += "<option value='"+ kv[0] +"'>" + kv[1] + "</option>";
      });
      
      //Add Class and select value
      $(sel).html(opt).addClass("hdnSelect").val($(this).val());     
      
      
      //Insert the element
      $(this).after(sel);
      
    });

    //Swap back on select or blur of select and set value
    //As the element is now dynamically add we nee to change the on event
    $("form").on("blur change", "select.hdnSelect", function(){

      //Reset the value of the text box
      $(this).prev(".hdnSelect").val($(this).val());
      
      //Show The text box
      $(this).prev(".hdnSelect").show();
      
      //Remove this select
      try{
        //Removing triggers the blur event to fire again
        //Remove in try block to suppress the error on 2nd remove
        $(this).remove();
      }
      catch{}
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" value="10" id="txt1" class="hdnSelect" data-options="1|One,2|Two,10|Ten">
  
  <br><br>
    <input type="text" value="1" id="txt2" class="hdnSelect" data-options="1|One,2|Two,4|Four,10|Ten">  

</form>

Answer 4

您可以为此使用replaceWith()。检查下面更新的 sn-p...

$("#textfield1").on("click",function(){
  $("#textfield1").replaceWith('<select id= "selct option"><option>1</option><option>2</option><option>10</option></select>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder = "click on me" id="textfield1" value= "10">

Answer 5

您是否尝试为现有的 select 元素添加 textbox 中的 options？

Fiddle here

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script>   
        function addOption() {
        val = $("#_textVal").val();
        key = $("#_textVal").val();
        if(val == ""){
            alert("Insert Text");
          return -1;
        }
        o = new Option(key, val);
        $("#_sel").append(o);
        $('#_textVal').val("");   }

      function editOption(sel) {
        val = sel.value;
        $('#_textVal').val(val);   }

    </script>
    <input type="text" placeholder="click on me" id="_textVal" value="10">
    <button id="_btnSet" onclick="addOption();">Set Option</button>

    <select id="_sel" onchange="editOption(this);"> </select>