Question

有没有将input type="text"代码转换为选择选项的方法？意味着在下面的代码片段中有一个输入字段，其中包含一些值，但是有任何方法在单击此文本字段时会转换为select选项。当我从选择选项中选择任何选项时，它将再次变为文本字段。（此字段不是可编辑字段* ）

＆＃13;

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

＆＃13;

<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">

＆＃13;

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

我不知道你想做什么。

以下是两方改变的示例。

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

＆＃13;

$(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()+'"/>');
  });

＆＃13;

<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">

＆＃13;

Answer 3

如上所述，你不能做你想做的事情。这两个标签非常不同。

以下是一些可能对您有用的选项。

编辑：修正了第二个选项

选项1

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

＆＃13;

RewriteEngine on
RewriteRule single-product/* https://www.sitename.com/single-product/ [P]

＆＃13;

//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();
});

＆＃13;

select.hdnSelect{display:none;}

＆＃13;

选项2

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

＆＃13;

<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>

＆＃13;

//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{}
       });

＆＃13;

Answer 4

您可以使用replaceWith()。检查下面更新的代码段...

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 5

您是否尝试从文本框为已有的选择元素添加选项？

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>

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

5 个答案: