使用jquery在下拉列表中设置第一个选项的值

时间:2016-04-28 05:20:12

标签: javascript jquery html twitter-bootstrap

所以我尝试使用jquery填充我的模态表单,但是我无法使下拉列表工作。我是jquery的新手,所以我不确定我是否做得对。这就是我使用数据将值传递给jquery的方法:

<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'];?>" >

这就是我在jquery上设置值并以模态形式显示的方法:

$('#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');
        })

类别和单位是下拉列表。这是以前的值应该显示为下拉列表中的第一个选项。其余的都在工作。

这是我以模态形式选择的代码。我不会包括其余的,只包括选择单位和类别。任何帮助将不胜感激:)

<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>

1 个答案:

答案 0 :(得分:1)

假设这是您的HTML代码

你可以试试这个

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

如果您还想为该选项设置文字:

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

但是,如果您的选择值已包含选项列表,并且您想要删除所选选项并将其添加到顶部,那么您可以执行以下操作

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