使用jquery获取select元素的值

时间:2022-11-28 08:22:01

I have the following HTML

我有下面的HTML

<div class="question-set">
      <div class="row question">
        <div class="col-md-2">
          <select class="form-control" name="type[]">
            <option value="Teacher feedback">Teacher feedback</option>
            <option value="Genral Question">Genral Question</option>
            <option value="Informative Question">Informative Question</option>
          </select>
        </div>
        <div class="col-md-8">
          <input type="text" class="form-control" name="questions[]" placeholder="Enter the question here" />
        </div>
      </div>
      <div class="row question">
        <div class="col-md-2">
          <select class="form-control" name="type[]">
            <option value="Teacher feedback">Teacher feedback</option>
            <option value="Genral Question">Genral Question</option>
            <option value="Informative Question">Informative Question</option>
          </select>
        </div>
        <div class="col-md-8">
          <input type="text" class="form-control" name="questions[]" placeholder="Enter the question here" />
        </div>
      </div>
    </div>

In short there is a select tag with name type[] and a text input field names questions[]. I need to pass the values to a php page as an ajax call to insert into the database. I have the following AJAX code..

简而言之,有一个带有name类型[]的选择标签和一个文本输入字段名问题[]。我需要将值作为ajax调用传递给php页面,以便插入到数据库中。我有以下AJAX代码。

  $.ajax({
          method: "POST",
          url: "feedback_create_form_process.php",
          data: {"questions": $("input[name='questions[]']").val(), "type": $("select option:selected").val()},
          success: function(data){
            alert(data);
          }
        });

Here is my PHP code

这是我的PHP代码

<?php
  include 'con.php';
  if (isset($_POST) && sizeof($_POST)) {
    $question = $_POST['questions'];
    $type = $_POST['type'];

    echo count($question);
    foreach( $question as $key => $n ) {
      $result = $con->query("insert into form question(null, ".$question[$key].", ".$n.")");
    }
  }
?>

The count is returned as 1. It sends only the first question and not the array. I want the values in an array so i can do an insert in a loop.

计数返回为1。它只发送第一个问题,而不发送数组。我想要数组中的值,这样我就可以在循环中插入。

2 个解决方案

#1


2  

As Documented in JQuery .Val()

如JQuery .Val()所示

Description: Get the current value of the first element in the set of matched elements.

说明:获取匹配元素集合中第一个元素的当前值。

You can use

您可以使用

var values = $("input[name='questions[]']").map(function(){return $(this).val();}).get();

or

var values = [];
$("input[name='questions[]']").each(function() {
    values.push($(this).val());
});

#2


0  

You can make use of jQuery's map() function to return the values as an array, like so:

您可以使用jQuery的map()函数以数组的形式返回值,如下所示:

var questions = $("input[name='questions[]']").map(function() {return $(this).val()}).get();
var types = $("select[name='type[]']").map(function() {return $(this).val()}).get();

$.ajax({
     method: "POST",
     url: "feedback_create_form_process.php",
     data: {"questions": questions, "type": types},
     success: function(data){
         alert(data);
     }
});

EDIT: Realizing a similar solution was provided by ABDU_GO. I find my script to be a bit more readable, however if you find this to be your solution, I'd suggest accepting his answer.

编辑:ABDU_GO提供了类似的解决方案。我觉得我的脚本更容易读,但是如果你觉得这是你的解决方案,我建议接受他的答案。

#1


2  

As Documented in JQuery .Val()

如JQuery .Val()所示

Description: Get the current value of the first element in the set of matched elements.

说明:获取匹配元素集合中第一个元素的当前值。

You can use

您可以使用

var values = $("input[name='questions[]']").map(function(){return $(this).val();}).get();

or

var values = [];
$("input[name='questions[]']").each(function() {
    values.push($(this).val());
});

#2


0  

You can make use of jQuery's map() function to return the values as an array, like so:

您可以使用jQuery的map()函数以数组的形式返回值,如下所示:

var questions = $("input[name='questions[]']").map(function() {return $(this).val()}).get();
var types = $("select[name='type[]']").map(function() {return $(this).val()}).get();

$.ajax({
     method: "POST",
     url: "feedback_create_form_process.php",
     data: {"questions": questions, "type": types},
     success: function(data){
         alert(data);
     }
});

EDIT: Realizing a similar solution was provided by ABDU_GO. I find my script to be a bit more readable, however if you find this to be your solution, I'd suggest accepting his answer.

编辑:ABDU_GO提供了类似的解决方案。我觉得我的脚本更容易读,但是如果你觉得这是你的解决方案,我建议接受他的答案。