从PHP中的表中的值在下拉列表<select>上设置默认值

问题描述：

I am trying to set default value in a list box from the values in the table. The values are getting populated in the listbox from the database and the values in the table are hard coded. Can anybody help me with this?

<table>
  <td align="center">
  <a href="#" onclick="setExperienceValue("experience", "1")">1</a><br>
  <a href="#" onclick="setExperienceValue()">2</a><br>
  <a href="#" onclick="setExperienceValue()">3</a><br>
  ...
</table>
<select class="form-control  input-lg" id="experience"name="experience" 
  placeholder="Experience (in Years)" required="">
 <option value="">Experience: </option>
 <?php
              $sql="SELECT * FROM experience";
              $result=$conn->query($sql);
              if($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                  echo "<option value='".$row['value']."' data- 
              id='".$row['id']."'>".$row['value']."</option>";
                }
              }
            ?>
        </select>
        <script type="text/javascript">
        function setExperienceValue () {                            
          var element = document.getElementById(id);
          element.value = val;
            }

     </script>

I am trying to set the default value in the listbox when the link in the table is clicked. How to populate the default value in such case?

答

I found a very easy solution for the problem. By adding the option of data-select in the anchor tag and adding a javascript for on click function. Below is the code changes.

    <table>
    <td align="center">
    <a href="#exp" data-select="1">1</a><br>
  <a href="#exp" data-select="1"">2</a><br>
  <a href="#exp" data-select="1"">3</a><br>
  ...
</table>
<select class="form-control  input-lg" id="experience"name="experience" 
  placeholder="Experience (in Years)" required="">
 <option value="">Experience: </option>
 <?php
              $sql="SELECT * FROM experience";
              $result=$conn->query($sql);
              if($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                  echo "<option value='".$row['value']."' data- 
              id='".$row['id']."'>".$row['value']."</option>";
                }
              }
            ?>
        </select>
        <script type="text/javascript">


    var $expe = $('#experience');
$('a[href="#exp"]').click(function () {
    $expe.val( $(this).data('select') );
});
         </script>

Hope this helps anyone facing this issue.

答

So to make an option become default, you need to include selected attribute. You can easily do this and add a check with PHP to see if you want to include it. For example;

if($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
      $selected = null;
      if($row["selected"] === 1) { //or some other condition
         $selected= "selected";
      }
      echo "<option {$selected} value='".$row['value']."' data-id='".$row['id']."'>".$row['value'].</option>";
  }
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

答

You did not specify the element ID when calling document.getElementById(). If you are trying to get the id of the for example, you need to use
```
document.getElementById("experience");
```

You also need to specify some kind of an attribute to a to recognize it, example id="link".

Then:

var a = document.getElementById("link").textContent;
var selection = document.getElementById("experience");
selection.value = a;

相关推荐