如何在AJAX中获取选择表单的值？

Question

This is my first week of PHP (so no bullying). I'm trying to grab the value of a select form and insert into my db. The insert is all good but I can't seem to pass the value.

Script:

<script type="text/javascript">
     //add to top 10
    function addTop10()
    {
    var show_id = $('#show_id').val();  
    var user_id = $('#user_id').val();
    var rank = $('select.rank').val();
        //Storing the value of textbox into a variable
    if(show_id == '')        //Checking for NULL
    {
    $('#propspectDiv').html('Enter A Valid Name');    //Prints the progress text into our Progress DIV
    $('#show_id').addClass('error');                    //Adding the error class to the progress DIV
    return;
    }
    else{
    $('#show_id').removeClass('error');
    $('#propspectDiv').removeClass('error'); //Removing the error class from the progress DIV
    $('#propspectDiv').html('Submitting your Request.<img src="ajax.gif" />');//Prints the progress text into our Progress DIV

    $.ajax({
    url : 'top10ajax.php', //Declaration of file, in which we will send the data
    data:{
    "show_id" : show_id,  
    "user_id" : user_id,
    "rank" : rank          //we are passing the name value in URL
    },
    success : function(data){
    window.setTimeout(function(){
    $('#propspectDiv').html('Added'); //Prints the progress text into our Progress DIV
    }, 2000);
    }
    });
    }
    }

    </script>

and the html

<div class="row">
        <div class="twelve columns">
<h4>Add to your top 10 </h4>
<div class="two columns">
    <form>
<select name="rank">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
  <option value="9">9</option>
   <option value="10">10</option>

</select>
</div>
<div class="four columns">
         <button class="large button" id="rank" type="button" value="Add to Top 10" onclick="addTop10()"></form>
</div>

What am I doing wrong, besides bad formatting?

Answer 1

select.rank will select an element of type select that is a member of the rank class.

<select name="rank"> isn't a member of any classes. It has no class attribute.

You need to either alter your selector so it matches the element or vice versa.

Answer 2

您尝试以错误的方式获取选择框的值，请尝试使用此方法

var rank = $("select['name=rank']").val();