Question

我有一个页面呈现动态表单，当用户提交时;我想提交给服务器＆＃34; TEXT VALUE＆＃34;选择的SELECT OPTION而不是VALUE属性。

任何形式的帮助都将受到赞赏。

<form id="MySelection" action="/submitform" accept-charset="UTF-8" method="post">
    <select name="modelname" id="modelname" class="form-control">
      <option value="" selected="">Model Selection</option>
      <option value="0">1.4 TB Distinctive</option>
      <option value="1">1.4 TB MultiAir Distinctive</option>
      <option value="2">1.4 TB MultiAir Progression Pluse</option>
      <option value="3">1.4 TB MultiAir Super TCT</option>
      <option value="4">1.4 TB Progression Plus</option>
      <option value="5">1.6 JTD Distinctive</option>
      <option value="6">1.6 JTD Progression</option>
      <option value="7">1.6 JTD Progression Plus</option>
      <option value="8">1.6 JTD Progression Pluse</option>
      <option value="9">1.6 JTD Super TCT</option>
      <option value="10">1.75 TBI Quadrifoglio Verde</option>
    </select>
    <input type="hidden" name="authenticity_token" value="xyz123">
    <button type="submit" id="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

我们无法通过PHP提交表单时将选定的下拉文本作为发布值。但它可以使用jQuery完成。

<?php 
print_r($_POST);
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <form id="MySelection" accept-charset="UTF-8" method="post">
                <select name="modelname" id="modelname" class="form-control">
                  <option value="" selected="">Model Selection</option>
                  <option value="0">1.4 TB Distinctive</option>
                  <option value="1">1.4 TB MultiAir Distinctive</option>
                  <option value="2">1.4 TB MultiAir Progression Pluse</option>
                  <option value="3">1.4 TB MultiAir Super TCT</option>
                  <option value="4">1.4 TB Progression Plus</option>
                  <option value="5">1.6 JTD Distinctive</option>
                  <option value="6">1.6 JTD Progression</option>
                  <option value="7">1.6 JTD Progression Plus</option>
                  <option value="8">1.6 JTD Progression Pluse</option>
                  <option value="9">1.6 JTD Super TCT</option>
                  <option value="10">1.75 TBI Quadrifoglio Verde</option>
                </select>
                <input type="hidden" name="authenticity_token" value="xyz123">
                <input type="hidden" name="hiddenmodelname" id="hiddenmodelname" value="">
                <button type="submit" id="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </body>
</html>
$(document).ready(function(){
    $("#MySelection").change(function(){
        var selectedVal = $( "#MySelection option:selected" ).text();
        $("#hiddenmodelname").val(selectedVal);
        $("#modelname").submit();
    });
}); 
</script>

Answer 2

试用此代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("#submit").on('click',function() {
          alert($("#modelname").find("option:selected").text()+' clicked!');
         });
    });
  </script>
</head>
<body>
 <select name="modelname" id="modelname" class="form-control">
  <option value="" selected="">Model Selection</option>
  <option value="0">1.4 TB Distinctive</option>
  <option value="1">1.4 TB MultiAir Distinctive</option>
  <option value="2">1.4 TB MultiAir Progression Pluse</option>
  <option value="3">1.4 TB MultiAir Super TCT</option>
  <option value="4">1.4 TB Progression Plus</option>
  <option value="5">1.6 JTD Distinctive</option>
  <option value="6">1.6 JTD Progression</option>
  <option value="7">1.6 JTD Progression Plus</option>
  <option value="8">1.6 JTD Progression Pluse</option>
  <option value="9">1.6 JTD Super TCT</option>
  <option value="10">1.75 TBI Quadrifoglio Verde</option>
</select>
<button type="submit" id="submit" class="btn btn-default">Submit</button>
</body>
</html>

如何在提交表单时获取SELECT OPTION的文本值？

2 个答案: