Question

如果我有一个php生成的下拉菜单，如何使用jQuery ajax将此数据发布到服务器？所以我可以在同一页面上反馈数据是否已提交，下面的代码是使用bootstrap。

对于我的工作，我尝试创建一个允许用户施放自我咒语的游戏，用户将提交自我拼写的内容并将其提交给selfspellajax.php，它会反馈到#selfspellhint该法术是否被施放。

 <form role="form">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Self Spells
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left">
     <?php
require_once('../../protected/configreadutopia.php');

$connection = mysqli_connect(DBHOST,DBUSER,DBPASS,DBNAME);

if (!$connection) {
  die('Could not connect: ' . mysqli_error($con));
}

if(isset($_SESSION["userid"])){
    if(!empty(($_SESSION["userid"]))){
        //prepare stmnt
        $query= mysqli_prepare($connection,'SELECT * FROM spellbook');
        //execute
        mysqli_stmt_execute($query);
        //result set.
        $result = mysqli_stmt_get_result($query);

            while($row = mysqli_fetch_assoc($result))
            {
                echo '<li><a href="#" data-value="'.$row["spell"].'">'.$row["spell"].'</a></li>';
            }
        // Free result set
        mysqli_free_result($result);
    }
}else{
    echo 'No user logged in';
}
mysqli_close($connection);
     ?>
     </ul>
   </div>
             <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
            </form>

我的JS文件

  $(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).text());
});

$("#submitselfspell").click(function () {
            var spellval = "test";
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:spellval},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

    });

Answer 1

只需阅读Drop Down中的值即可。给你一个id：

<ul class="dropdown-menu pull-left" id="my-dropdown">

然后你可以通过jQuery

读取值

var data = $('#my-dropdown').val();

并将其放在ajax调用的数据对象中。

Answer 2

试试这个：

$(document).on('click', '.dropdown-menu li a', function () {
    var selected_value = $(this).text();
    $(#hidden_element).val(selected_value);   
});

从更改后获取值并将其存储在隐藏元素上。之后使用以下代码：

$("#submitselfspell").click(function () {
            var spellval = $(#hidden_element).val();
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:spellval},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

    });

HTML示例：

<form role="form">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Self Spells
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left">
        <li>Item - #1</li>
        <li>Item - #2</li>
        <li>Item - #3</li>
     </ul>
   </div>
   <input type="hidden" id="hidden_element" value=""> 
   <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
</form>

Answer 3

试试这个：

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).text());
  $(".dropdown-menu").attr('value', $(this).data('value'));
});

$("#submitselfspell").click(function () {
            var spellval = $(".dropdown-menu").attr('value');
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:value},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

});

获取列表项的值和POST到ajax

3 个答案: