CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
April G
April G

Reputation: 111

Set value of first option on dropdown list using jquery

So I am trying to populate my modal form using jquery but I can't make the dropdown list work. I am new to jquery so I am not sure if I am doing things right. This is how I passed the values to jquery using data:

<a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editItem" data-id="<?php echo $row_selectItem['item_id'];?>" data-no="<?php echo $row_selectItem['item_no'];?>" data-desc="<?php echo $row_selectItem['item_desc'];?>" data-cat="<?php echo $row_selectItem['cat_name'];?>" data-unit="<?php echo $row_selectItem['unit_name'];?>" data-quantity="<?php echo $row_selectItem['quantity'];?>" data-cost="<?php echo $row_selectItem['unit_cost'];?>" >

And this is how I set the values on jquery and to show them on modal form:

$('#editItem').on('show.bs.modal', function (e) {
              var id = $(e.relatedTarget).data('id');
              var no = $(e.relatedTarget).data('no');
              var desc = $(e.relatedTarget).data('desc');
              var cat = $(e.relatedTarget).data('cat');
              var unit = $(e.relatedTarget).data('unit');
              var cost = $(e.relatedTarget).data('cost');
              var quantity = $(e.relatedTarget).data('quantity');
              $("#item_id").val(id);
              $("#item_no").val(no);
              $("#item_desc").val(desc);
              $("#category option:first").val(cat);
              $("#unit option:first").val(unit);
              $("#unit_cost").val(cost);
              $("#quantity").val(quantity);
            });

            $('#editItem').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
        })

The category and unit are dropdown list. That is where the previous values should be shown as first options on the dropdown list. The rest are working.

This is my code for select in modal form. I will not include the rest of them, only the select for unit and category. Any help would be greatly appreciated :)

<div class="form-group">
  <select class="form-control" id="category" name="category">
    <option value=""></option> //value should be here
  </select>
  <span class="help-block"></span>
</div>
<div class="form-group">
  <select class="form-control" name="unit" id="unit">
    <option value=""></option>//value should be here
  </select>
  <span class="help-block"></span>
</div>

Upvotes: 2

Views: 2064

Answers (1)

progrAmmar
progrAmmar

Reputation: 2670

Assuming that is your HTML code

You can try this

$("#category > option:first-child").val(cat);
$("#unit > option:first-child").val(unit);

And if you want to set the text for the option as well:

$("#category > option:first-child").text(cat);
$("#unit > option:first-child").text(unit);

If however, your select value already contains a list of options and you want to remove the selected one and add it to the top then you can do something like this

if($('#category > option[value=' + cat + ']').length !== 0){
    $('#category > option[value=' + cat + ']').remove();
}    
$('#category').prepend(new Option(cat, cat));

Upvotes: 1

Related Questions