waqas adil waqas adil - 2 months ago 5
jQuery Question

How to get text "ONLY ONCE" between <option> some value</option> tags using jquery or java script?

Problem:
when the user click on multiple check boxes the text value from the option tags copied multiple times in the item list.

Let There are two option list .
list 1 and list 2

from list 1 and list 2 i need the text value only once from the option tags.

Please see My fiddle for better understanding.

<p>list 1</p>
<select >
<option id="item" value="amna">Volvo</option>
<option id="item" value="sara">Saab</option>
<option id="item" value="jhon">Opel</option>
<option id="item" value="khubab">Audi</option>




<p>list 2</p>
<select >
<option id="item" value="volvo">Volvo</option>
<option id="item" value="saab">Saab</option>
<option id="item" value="opel">Opel</option>
<option id="item" value="audi">Audi</option>
</select>


My Fiddle

Thanks in advance and do not cast vote down to my question as i am new here.Please edit my question if you think it is ambiguous.

Fiddle Example will be appreciated.

Answer

First of all change all id's to classes you cannot use multiple id's with same name.

Every time you are appending an extra li from your select tag which is wrong.

Here is your required answer,

function addToList( values, optionText,optionText2 ) {
    var list = $( "#grocery-list ul" );
    list.empty();
    values.each(function(){
    	list.append( "<li>" + $(this).next().html() + " <a class='delete_li'> (x)</a> </li>" );
    });
    list.append( "<li>" + optionText + " <a class='delete_li'>(x)</a> </li>" );
    list.append( "<li>" + optionText2 + " <a class='delete_li'>(x)</a> </li>" );
};

$('body').on('click', '.delete_li', function() {
    $(this).closest('li').remove();
});
$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    $( "input:checked" ).effect( "transfer", {
        to: "#grocery-list ul",
        complete: function() {
        	var optionText = $('.first_select :selected').val();
          var optionText2 = $('.second_select :selected').val();
          console.log(optionText)
            addToList( $( "input:checked" ), optionText,optionText2 );
        }
    });
});
fieldset {
  width: 300px;
}

input {
  padding: 0.5em;
}

#grocery-list {
  border: 1px solid black;
  float: right;
  width: 300px;
  padding: 0 1em 0em 1em;
}

#grocery-list h3 {
  margin-top: 0.3em;
}

.ui-effects-transfer {
  border: 1px dotted black;
}
<style href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"></style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="grocery-list">
	<h3>Item List</h3>
	<ul>
		<li class="empty">Empty</li>
	</ul>
</div>
<form>
	<fieldset>
		<legend>Add Item</legend>
		<label for="item">Item:</label><br>
		<input class="item" type="checkbox" name="vehicle"  value="bike"><label>I have a bike</label> 
			<br>
      <input class="item" type="checkbox" name="vehicle" value="cycle" ><label>I have a bicycle </label>
					<br>
          <input class="item" type="checkbox" name="vehicle" value="aeroplane" ><label>I have a aeroplane </label>
							<br>
              <input class="item" type="checkbox" name="vehicle" value="Car"><label>I have a car</label><br>
   <select class="first_select">
  <option class="item" value="volvo">Volvo</option>
  <option  class="item" value="saab">Saab</option>
  <option class="item" value="opel">Opel</option>
  <option class="item" value="audi">Audi</option>
</select><br>
<select class="second_select">
  <option class="item" value="volvo">Volvo</option>
  <option  class="item" value="saab">Saab</option>
  <option class="item" value="opel">Opel</option>
  <option class="item" value="audi">Audi</option>
</select><br>
        
									<button>Add</button>
								</fieldset>
							</form>

Pls run this code and check,

Here is the Fiddle

Comments