Add/Remove select using jQuery

Question

I built this code in order add and remove select thanks to button but when i click on it, nothing happen.

UPDATE :

My HTML :

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
<div>
<select class="form-control" name="competence" id="competence">
  <?php foreach ($resDisplayCompetence as $ligne) { ?>
  <option value="<?php echo $ligne['id'] ?>"><?php echo $ligne['name'] ?></option>
  <?php } ?>
</select>

My jQuery :

$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
  x++; //text box increment
  $(wrapper).append(
    '<select class="form-control" name="competence" id="competence"><option value="">test</option></select>'); //add input box
}
});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});

I wanted to know if it is possible to add dynamic select using PHP with this jQuery code.

Where is `remove_field`? Also note _Identifiers_ must be unique https://jsfiddle.net/9n7xvgyp/ — Satpal, Jan 19 '16 at 09:00
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — halfzebra, Jan 19 '16 at 09:00
thanks you @ArunPJohny ! do you know if it's possible to get the same code, but with foreach on each select ? coz my selects use php .. — Lucas Frugier, Jan 19 '16 at 09:03
`wrapper.on("click",".remove_field", function(e){};` and `add_button.click(function(e){});` ? — Huelfe, Jan 19 '16 at 09:05
@LucasFrugier The delete function will depend on what you want to do with it — Arun P Johny, Jan 19 '16 at 09:10
i misspoke. in my app my select that i need to add or remove using php like that : ` — Lucas Frugier, Jan 19 '16 at 09:14
@ArunPJohny do need to use "$" before add_button when add_button is it self a jquery object var add_button = $(".add_field_button"); — brk, Jan 19 '16 at 09:17
@LucasFrugier do you want make a clone of the existing select? — Arun P Johny, Jan 19 '16 at 09:35
nop ... i have a dynamic list, with option from a database .. i need to get my foreach for each time that the button 'add' is clicked — Lucas Frugier, Jan 19 '16 at 10:11

score 0 · Answer 1 · answered Jan 19 '16 at 09:28

Found this article at https://www.safaribooksonline.com/library/view/jquery-cookbook/9780596806941/ch10s07.html, which might help you with your issue.

HTML:

<label for="form-control">Form Control</label>
<select class="form-control" name="competence" id="competence">
    <option>Option 1</option>
</select>
<br>
<br>

<button id="remove">Remove</button>
<br>
<br>

<label for="newFieldName">New Select</label>
<input id="newFieldName" type="text" />

<label for="newFieldValue">Value</label>
<input id="newFieldValue" type="text" />

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

jQuery:

// find the "Add New" button
$('#add').click(function(event){
    event.preventDefault();
    //could be static values
    var optionName = $('#newFieldName').val();
    var optionValue = $('#newFieldValue').val();
    $('<option/>').attr('value',optionValue).text(optionName).appendTo('#competence');
});


// find the "Remove Selected" button
$('#remove').click(function(event){
    event.preventDefault();
    var $select = $('#competence');
    $('option:selected',$select).remove();
});

jsFiddle - https://jsfiddle.net/0d83L0q8/

score 0 · Answer 2 · answered Jan 19 '16 at 09:56

I think what you are looking for is

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var $select = $('#competence');

  var x = 1; //initlal text box count
  add_button.click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $select.clone().removeAttr('id').appendTo(wrapper.find('div'));
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    if (x > 1) {
      x--;
      wrapper.find('select:not(#competence)').last().remove();
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <button class="remove_field">Remove More Fields</button>
  <div>
    <select class="form-control" name="competence" id="competence">
      <option value="">test</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

Add/Remove select using jQuery

2 Answers2