jQuery将小数添加到SELECT，没有重复项并带有删除选项 [英] jQuery add decimal to SELECT, No Duplicates with option to remove

问题描述

可以了:需要过滤出重复项，并能够将添加的值删除到SELECT框中.

OK here goes: Need to filter out duplicates and the ability to remove added values to a SELECT box.

Number: <input type="text" name="number" />
<br />
<!-- Clicking the button should add an option w/ the value being the text displayed -->
<button type="button">Add</button>
<br />
<Select id="mySelect" size="9"></Select>
<br />
<!-- Display only if SELECT box has a value -->
<button type="button" hidden="hidden">Remove</button>

我看过

I have looked at this thread but still missing something.

推荐答案

我不太确定您要问什么，因此进行澄清将很有帮助.这是我对您要寻找的东西的了解:

I'm not quite sure what you're asking, so clarification would be helpful. Here's my crack at what your looking for:

JavaScript

<script type="text/javascript" charset="utf-8">
 $( function() {       
   // Add number from <input> as an <option> to the <select>
   $('#add_number').click( function() {
     // Get Number from <input>
     var numberToAdd = $('#number_to_add').val();

     // Make sure it's not a duplicate; if so, don't add
     var match = false;
     $('#mySelect option').each( function() {
       if (numberToAdd == this.value) match = true;
     });
     if (match) return false;

     // Add the number to the <select>
     $('#mySelect').append(
       $('<option></option>').html(numberToAdd).val(numberToAdd)
     );

     // Show the remove button
     $('#remove_selected').show();
     return false;
   });

   // Remove the currently selected <option> in the <select>
   $('#remove_selected').click( function() {
     $('#mySelect option:selected').remove();
     return false;
   });
 })
</script>   

HTML

<form action="#">
  <p>
    Number: <input type="text" name="number_to_add" id="number_to_add" />
    <button id="add_number" type="button">Add</button>
  </p>
  <p>
    <select id="mySelect" size="9"></select>
    <button id="remove_selected" type="button" style="display:none;">Remove</button>
  </p>
</form>

这篇关于jQuery将小数添加到SELECT，没有重复项并带有删除选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！