Question

我想获取搜索框文本并将其附加到选择框的下拉列表中。我浪费了几个小时，但没有得到任何帮助。点击Documentation

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

    <select style="width: 200px;" id="single">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
    </select>
    <br /><br />
<script>
$('select').select2({
      language: {
         noResults: function(term) {
            var value = $('.select2-search__field').val();
           return "Click on above Add button."+value;
        }
      }
    });
</script>

Answer 1

使用我提出的文档

使用select2 .data可能更正确或更简单，但这确实有效

var typed = "";
$('#mySelect2').select2({
  language: {
    noResults: function(term) {
      typed = $('.select2-search__field').val();
    }
  }
  
});
$('#mySelect2').on('select2:select', function (e) {
  typed = ""; // clear
});
$("#but").on("click", function() {
  if (typed) {
      // var value = prompt("Do you have a state abbriviation for "+typed+"?"); // change typed to value where necessary

    // Set the value, creating a new option if necessary
    if ($('#mySelect2').find("option[value='" + typed + "']").length) {
      $('#mySelect2').val(typed).trigger('change');
    } else {
      // Create a DOM Option and pre-select by default
      
      var newOption = new Option(typed, typed, true, true); 
      // Append it to the select
      $('#mySelect2').append(newOption).trigger('change');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 200px;" id="mySelect2">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
    </select>
<button type="button" id="but" data-target="#single">Add </button>

也许你想要这个？

您可以添加

var value = prompt("Do you have a state abbriviation for "+typed+"?");

如果您需要值

中的双字母缩写

var typed = "";
$('#mySelect2').select2({
  language: {
    noResults: function(term) {
      typed = $('.select2-search__field').val();
      if (typed.length>3) getState()
    }
  }

});
$('#mySelect2').on('select2:select', function(e) {
  typed = ""; // clear
});
function getState() {
  if (typed) {
    id = prompt("Do you have a state abbriviation for " + typed + "?", ""); // change typed to value where necessary
    if (id = "") return;

    // Set the value, creating a new option if necessary
    if ($('#mySelect2').find("option[value='" + id + "']").length) {
      $('#mySelect2').val(typed).trigger('change');
    } else {
      // Create a DOM Option and pre-select by default

      var newOption = new Option(typed, id, true, true);
      console.log(newOption)
      // Append it to the select
      $('#mySelect2').append(newOption).trigger('change');
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 200px;" id="mySelect2">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
    </select>

Answer 2

来自documentation

 // Create a DOM Option and pre-select by default
    var newOption = new Option(data.text, data.id, true, true);
    // Append it to the select
    $('#mySelect2').append(newOption).trigger('change');

在你的情况下会是这样的：

<select style="width: 200px;" id="single">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>
<input type="text" id="code" placeholder="State Code" />
<input type="text" id="name" placeholder="State Name" />

<button type="button" id="add">Add </button>

<script>
   $("#add").click(function(){
      var code = $("#code").val();
      var state = $("#name").val();

      //TODO PUT SOME VALIDATION

    var newOption = new Option(code, state, true, true);
    // Append it to the select
    $('select').append(newOption).trigger('change');
   });
</script>

Answer 3

最后这里是答案这就是我希望它能帮助某人并节省时间。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 200px;" id="continent">
      <option value="AL">Asia</option>
      <option value="AK">Europe</option>
</select>
<script>
    //var value = prompt("Do you have a state abbriviation for "+typed+"?");

  var typed = "";
    $('#continent').select2({
      language: {
        noResults: function(term) {
            console.log(event.target.value);
            typed = event.target.value;
            if (typed.length>4){
                continentVal = prompt("Sorry ! Not found any continent do you want to add new continent"); 
                console.log(' === '+continentVal);              
                if (continentVal != ""){
                    console.log('Here we go '+event.target.value+ continentVal);
                    // Create a DOM Option and pre-select by default
                    var newOption = new Option(continentVal,continentVal, true, true);
                    // Append it to the select
                    $('#continent').append(newOption).trigger('change');
                }
            }
        }
      }
    });

</script>

获取select2搜索框值并将其附加到下拉列表中

3 个答案: