Question

首先查看my client site以获取主意。

在上面的网站上，我在右侧有一个礼品盒。有3个选择框。目前我正在为这3个选择框使用3个表单，这意味着每个下拉选择框都嵌入到表单中。当您选择第一个下拉选择框时，它会选择一个和第二个选择框，将确定从第一个选择框中选择哪个值。因此，如果你选择Man，那么Man的所有athe相关场合都将被显示为秒下拉选择框。它的工作正常。

但问题是每次选择第一个下拉框时都会刷新。

我不想刷新页面。它必须选择值并传递值，以便秒选择框可以确定其相关值。

所以我在想我们ajax。但没有成功。

所以我为第一个下拉选择框添加了一些代码。

这是html和php以及wordpress的混合。

<div class="select-one">

 <form id="searrec" method="post" action="">
    <select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();"> 

            <?php 
                    $results_rec = get_option('current_recipient');
                    if(isset($_POST['selectionRecipient'])){
                        $results_rec = $_POST['selectionRecipient'];
                        update_option('current_recipient', $results_rec);
                        $results_rec = get_option('current_recipient');
                    }
            ?>
        <?php 
        //asort($result_rec);
        $t_name_arr = array();

        foreach($result_rec as $rec):
                $t_id = $rec->term_id;
                $term = get_term($t_id , 'category' );
                $t_name_arr[] = $term->name;
        endforeach;

        //print_r($t_name_arr);

        rsort($t_name_arr);

        foreach ($t_name_arr as $t_name):?><option class="rec_val"<?php if($results_rec==$t_name){ echo 'selected="selected"';}?>value="<?php echo $t_name;?>"><?php echo $t_name;?></option>
      <?php endforeach;?>

      </select> 
    <input type="hidden" id="submitrec" value="Search" />
    </form> -->

</div>

因此，我正在使用表单方法发布并使用$_POST检索所选值并将其传递给$results_rec变量。

稍后在代码中，我使用if.. else确定if $results_rec =='Man'，然后显示与Man相关的某些项目，等等。

所以我想要的是当我从第一个下拉选择框中选择项目时不刷新页面。

请帮忙。

Answer 1

改变这个：

<select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();">

到此：

<select name="selectionRecipient" id="selectionRecipient">

和jquery：

$("#searrec").submit(function(e) {
   e.preventDefault();

   // your code

   return false;
});

<强>编辑：

使用它来获取所选索引（数字）

var index = $("#selectionRecipient")[0].selectedIndex;

或价值：

var value = $("#selectionRecipient")[0].value;

然后你可以调用ajax :(假设其他选择框有“id = other_select”

$.ajax({url:"index.php",type:"POST",data {type:"populate",index:2,value:"option1"},dataType:"json",
   success: function(data) {
      // data (json) returned from server so populate other selection boxes with that..
  // in this example 'data' is an array, coming directly from server (see below the .php)   
      $("#other_select")[0].selectedIndex = 0;
  for(var x in data) {
     $("#other_select")[0].options[x] = new Option(data[x]);
  }
   }
})

在你的.php我假设你得到一个列表（等数据库）来填充其他选择列表（在客户端）。此代码可能如下所示：

if (isset($_POST["type"]) && $_POST["type"]=="populate") {
   echo json_encode(array("option1","option2","option3"));
   exit(1);
}

Answer 2

$('#searrec').submit(function () {
 //do some form submit work here
 return false;
});

Answer 3

您必须使用AJAX调用根据您在第一个选择的内容填充其他选择框而不重新加载页面。

我建议你看一下jQuery的AJAX功能。阅读$.ajax和$.post - 您可以将它们在第一个列表框中选择的值提交给PHP脚本，然后根据该值返回并填充其他选择框。< / p>

Answer 4

使用AJAX更新其他选择而不刷新页面。使用jQuery简化AJAX。

这个问题会有所帮助： Change the selected value of a drop-down list with jQuery

Answer 5

$('#searrec').submit(function(e){

    e.preventDefault();

});

Answer 6

你应该从组合框删除事件 onchange =“this.form.submit（）;

使用ajax和jquery：

$("#searrec").onchange(function() {
    $.ajax({
        url:"",
        success:function(response){
            alert("success");
        }
    });
});

Answer 7

家伙已修好。

Plz看看http://giftideasitems.com/。

查看礼品查找器框，看看它是如何工作的。

我使用iframe并嵌入表单，在那里下载编码。而已。

即使我使用onchange =“this.form.submit（）”并且页面不会引用，实际上页面刷新....但不是主页面，只有iframe刷新，这很好。这正是我想要的。

<div id="gift-finder">
<div class="gift-finder-form">

            <iframe name="inlineframe" src="code.php" frameborder="0" 
                    scrolling="auto" width="200" height="180" 
                    marginwidth="0" marginheight="0" id="gift-iframe">
            </iframe>

</div>

这是我的iframe代码并看到src，我使用了code.php;所以所有代码都在不同的地方。

虽然我不得不修改一些css，但无论如何这很好。

感谢昨天贡献的所有人。

如何在onchange =＆＃34; this.form.submit（）＆＃34;上停止刷新页面

7 个答案: