Question

我正在使用Materialize在我的html中创建一个选择表单。如何使用javascript / jquery中的变量来存储此表单中的输入值？

表单的html代码为：

  <div class="input-field col s12">
      <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
  </div>

谢谢

Answer 1

function jsFunction(){
var e = document.getElementById("ViewSelect");
var strUser = e.options[e.selectedIndex].text;
console.log(strUser)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s12">
      <select id="ViewSelect" onchange="jsFunction()">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
  </div>

您的Select Statment

应该有ID

<div class="input-field col s12">
      <select id="ViewSelect">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
  </div>

然后你应该在JavaScript中访问

var e = document.getElementById("ViewSelect");
var optionSelectedIndex = e.options[e.selectedIndex].value;
var optionSelectedValue = e.options[e.selectedIndex].text;

Answer 2

您可以通过jquery获取选定的值和文本，如下所示：

$("select option:selected").val(); //to get value
$("select option:selected").text(); // to get text

如果您的网页上有多个选择，则必须为每个选择元素添加一个ID。

例如：

＆＃13;

$(document).ready(function(){

$("#materializeSelect").change(function(){
   getValue();
});
});


function getValue(){
alert('Value is: ' + $("#materializeSelect option:selected").val()); //to get value
alert('Text is: ' + $("#materializeSelect option:selected").text()); // to get text
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-field col s12">
  <select id="materializeSelect">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>

＆＃13;

Answer 3

根据您在@ Batman的回答中的评论，这可能会对您有所帮助。

这主要是jQuery，你不需要使用一个函数来为不同的选择器调用相同的代码库，只需使用我的代码中所示的选择器类。

$(document).ready(function() {
  $(document).on('change', '.materializeSelect', function() {
    var selVal = $(this).find('option:selected').val(),
      selTxt = $(this).find('option:selected').text();
    if (selVal !== "" && selTxt !== "") {
      window.location.href = "yourphppage.php?val=" + selVal + "&txt=" + selTxt;
    } else {
      alert("Select a material");
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s12">
  <select class="materializeSelect">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label><br/>
  <select class="materializeSelect">
    <option value="" disabled selected>Choose your option</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
  </select>
  <label>Materialize Select</label>
</div>

这是一个有效的jsFiddle

从JQuery获取表单输入值

3 个答案: