使用 JavaScript：当我编辑特定的 html 表格行时使用模态类。 如何在下拉列表中选择当前值？

Question

I am new in this!

I have a table of content with the tag [Name, Gender and Age]. When editing a line, using the modal class, the dropdownlist doesn't take the select table value as the default value on the dropdownlist, it will show it empty.

Tx!

AC

<div class="modal fade" id="modal-edit">
  <div class="modal-dialog">
    <div class="modal-content">
        <form action="page.php" method="POST" class="form-horizontal">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit</h4>
        </div>
        <div class="modal-body">
        <div class="box-body">
            <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10"> 
                <input name="item0" id="item0" class="form-control">
                </div>
            </div>

            <div class="form-group">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-10">
            <select class="form-control select2" name="item1" id="item1" >
                <option></option>
                <option>Female</option>
                <option>Male</option>
            </select>
            </div>
            </div>

            <div class="form-group">
            <label class="col-sm-2 control-label">Age</label>
                <div class="col-sm-10"> 
                <input name="item2" id="item2" class="form-control">
                </div>
            </div>
        </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          <button type="Submit" name="update" class="btn btn-primary">Edit</button>
        </div>
        </form>

    </div>
  </div>
</div>

Answer 1

I think you want show default value in drop down like this. add value for each option in select box and make one option selected by add selected attribute.

 <select class="form-control select2" name="item1" id="item1" >
                <option selected>Please Select Gender</option>
                <option value="female">Female</option>
                <option value="male">Male</option>
            </select>

edited

<script>
var gender='male'; // you variable may have value 'male' or 'female'
$('#item1').val(gender);

Answer 2

Check my snippet and its working fine as your need & instructions with using of select2 plugin for drop-down Gender selection.
I hope below snippet will help you lot.

 $(document).ready(function(){ $('.select2').select2({ minimumResultsForSearch: -1 //Search field hide }); }); $('#modal-edit').on('show.bs.modal', function(e) { // e.relatedTarget -> to find which button clicked var getName = $(e.relatedTarget).parents()[1].cells[0].innerText; var getGender = $(e.relatedTarget).parents()[1].cells[1].innerText; var getAge = $(e.relatedTarget).parents()[1].cells[2].innerText; $('#item0').val(getName); $('#item1').val(getGender); $('#item2').val(getAge); $(".select2").select2({minimumResultsForSearch: -1}); //after value set in drop-down list then again reinitialize });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> <br> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> <th width="120">Action</th> </tr> </thead> <tbody> <tr> <td>Ricky</td> <td>Male</td> <td>40</td> <td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> &nbsp;Edit</button></td> </tr> <tr> <td>Mikolo</td> <td>Female</td> <td>38</td> <td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> &nbsp;Edit</button></td> </tr> <tr> <td>Simora</td> <td>Female</td> <td>28</td> <td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> &nbsp;Edit</button></td> </tr> <tr> <td>Raeesh</td> <td>Male</td> <td>29</td> <td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> &nbsp;Edit</button></td> </tr> <tr> <td>Yuvraj</td> <td>Male</td> <td>37</td> <td><button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modal-edit"><span class="glyphicon glyphicon-edit"></span> &nbsp;Edit</button></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal fade" id="modal-edit"> <div class="modal-dialog"> <div class="modal-content"> <form action="'.$page.'" method="POST" class="form-horizontal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Edit</h4> </div> <div class="modal-body"> <div class="box-body"> <div class="form-group"> <label class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input name="item0" id="item0" class="form-control"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <select class="form-control select2" name="item1" id="item1" data-width="100%"> <option value="Female">Female</option> <option value="Male">Male</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Age</label> <div class="col-sm-10"> <input name="item2" id="item2" class="form-control"> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="Submit" name="update" class="btn btn-primary">Save & Update</button> </div> </form> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>