javascript - 下拉菜单总是返回 0

Question

我根据下拉选择隐藏和显示 div。但下拉菜单总是返回 0 值。

$(document).ready(function() {
  $('#rel_status').on('change', function() {
    if (this.value == 'never') {
      $("#pre_rel").hide();
    } else {
      $("#pre_rel").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="relationship_status" id="rel_status">
		<option value="-1">Please Select</option>
    <option value="never">Never Married</option>
    <option value="divorced">Divorced</option>
    <option value="waiting">Waiting for Divorce</option>
    </select>


<div id="pre_rel" style="display:none;">
  hi
</div>

php 代码:除了 rel_status 之外，所有其他字段都工作正常。它在数据库中保存 0。

if(isset($_POST['save']))
{
    $about_me= $_POST['about_me'];
    $relationship_status= $_POST['relationship_status'];
    $pre_relationship=$_POST['pre_relationship'];
    $weight=$_POST['weight'];
    $height=$_POST['height'];
    $eye_color=$_POST['eye_color'];
    $hair_color=$_POST['hair_color'];
    $language_first=$_POST['language_first'];
    $language_second=$_POST['language_second'];
    $ethnic_group=$_POST['ethnic_group'];
    $stmt = $conn->prepare("update  user set about_me='$about_me',rel_status='$relationship_status',pre_relationship='$pre_relationship',weight='$weight',height='$height',eye_color='$eye_color',hair_color='$hair_color',primary_language='$language_first',second_language='$language_second',ethnic_group='$ethnic_group' where user_id='".$_SESSION['userid']."'");

$stmt->bind_param("ssssssssss", $about_me,$relationship_status,$pre_relationship,$weight,$height,$eye_color,$hair_color,$language_first,$language_second,$ethnic_group);
$stmt->execute();

$stmt->close();

Answer 1

值属性无法访问选择值。您需要循环选项并追逐选定的标志。 (如果您使用多个属性，则选择可以选择多个选项)

var val = null;
document.getElementById('mySelect').options.forEach(function(o) {
  if(o.selected) val = o.value;
});