i would like to use jquery to add value and name to a select option such that it displays the current valye assigned by the jquery

user_9665023 0
Viewed 64

the anchor tag to display the modal

<?php
echo "<a href='#edit_task'  data-toggle='modal' data-id='$info_id' data-startd='$startdate' data-endd='$finishdate' data-pro='$progress' data-started='$status_id'><i class='fas fa-edit fa-lg fa-fw'></i></a>";
?>

the modal data

<div class="modal fade" id="edit_task">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post"  enctype="multipart/form-data">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">add new user</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">        

                    <div class="form-group ">
                        <label for="progress">progress</label>

here is where the problem lies it does not display the current value in the option as declared in the jQuery

                <select id="progress" class="form-control" name="prog">
                    <option value ="1">0%</option>
                    <option value="2">25%</option>
                    <option value="3">50%</option>
                    <option value="4">100%</option>
                </select>
            </div>
        </div>

the modal footer

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <?php
            echo "<button type='submit' class='btn btn-primary' name='edit' onclick='return mess()'; >";
            echo "save";
            echo "</button>";
            ?>
        </div>

alert box for saving data

                <script type="text/javascript">
                    function mess(){
                        alert ("the new user is successfully saved");
                        return true;
                    }
                </script>
            </form>
        </div>
    </div>
</div>

the jquery code if possible a code to add value in the <select> so that it detects both name and value

<script>
    $('#edit_task').on('show.bs.modal', function(e) {
        var progg= $(e.relatedTarget).data('pro');
        $(e.currentTarget).find('select[name="prog"]').val(progg);
    });
</script>
bootstrap-4 mysql html php jquery
1 Answers

You have use .val(progg) in your jquery code it will search for option where value="proggvalue" but here your option value are 1,2.. so its not able to find which one to set selected.Instead , use $(e.currentTarget).find("#progress option:contains("+progg+")").attr("selected",true); this will find option text which has value progg.

Demo Code :

$('#edit_task').on('show.bs.modal', function(e) {
  var progg = $(e.relatedTarget).data('pro');
  console.log(progg)
  //remove attr selected
  $('#progress option:selected').removeAttr('selected');
  //find option where .text progg
  $(e.currentTarget).find("#progress option:contains(" + progg + ")").attr("selected", true);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<a href='#edit_task' data-toggle='modal' data-id='$info_id' data-startd='$startdate' data-endd='$finishdate' data-pro='25%' data-started='$status_id'><i class='fas fa-edit fa-lg fa-fw'>Click</i></a>
<a href='#edit_task' data-toggle='modal' data-id='$info_id' data-startd='$startdate' data-endd='$finishdate' data-pro='100%' data-started='$status_id'><i class='fas fa-edit fa-lg fa-fw'>Click</i></a>
<div class="modal fade" id="edit_task">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="" method="post" enctype="multipart/form-data">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">add new user</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">

          <div class="form-group ">
            <label for="progress">progress</label>

            <select id="progress" class="form-control" name="prog">
              <option value="1">0%</option>
              <option value="2">25%</option>
              <option value="3">50%</option>
              <option value="4">100%</option>
            </select>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type='submit' class='btn btn-primary' name='edit' onclick='return mess()' ;></button>
        </div>

user_106064000
Related