在第一次选择填充后选择第二个选择，然后在第二个选择后添加按钮？

如何显示第二个下拉菜单，该下拉菜单依赖于第一个下拉菜单中的答案，然后在第二个下拉菜单显示后显示一个按钮。在第一次选择填充后选择第二个选择，然后在第二个选择后添加按钮？

我已经找到下显示第二滴的几个例子，但是没有上添加第三个元素就像一个按钮。

我知道我会如何来用PHP/MySQL的的下拉菜单，但我是新来的jQuery。

[更新]

这是我迄今为止

HTML

<select id="source"> 
     <option>Select</option> 
     <option>Company</option> 
     <option>City</option> 
     <option>State</option> 
    </select> 
    <select id="source2a" class="select"> 
     <option>Sort by</option> 
     <option>Sort A-Z</option> 
     <option>Sort Z-A</option> 
    </select> 
    <select id="source2b" class="select"> 
     <option>Sort by</option> 
     <option>Sort A-Z</option> 
     <option>Sort Z-A</option> 
    </select> 
    <select id="source2c" class="select"> 
     <option>States</option> 
     <option>State 1</option> 
     <option>State 2</option> 
     <option>Etc.</option> 
    </select>

CSS

.select {display: none;}

的Javascript

var i = 0; 
$(document).ready(function(){ 
$('#source').change(function() { 
    if ($('#source option:selected').text() == "Company"){ 
     $('.select').hide(); 
     $('#source2a').show(); 
    } else if ($('#source option:selected').text() == "City"){ 
     $('.select').hide(); 
     $('#source2b').show(); 
    } else if ($('#source option:selected').text() == "State"){ 
     $('.select').hide(); 
     $('#source2c').show(); 
    } else { 
     $('.select').hide(); 
    } }); 
});

http://jsfiddle.net/chonito13/stAAm/

来源

2012-11-29 chonito13

当要求这样的完整解决方案时，它表现出很好的礼节。也许发布一些你找到的代码，或者告诉我们你已经尝试过了。 – Tyrsius

我发布了一个工作示例供您参考。只需将代码复制/粘贴到服务器上的两个.php文件并运行即可。您会注意到第一个（未命名的）文件调用第二个文件，因此您必须命名第二个'another_php_file.php'，或者在第一个文件（$ .AJAX调用）中更改其引用。请记住接受答案，并注意其他有用的评论/答案。 – gibberish

我用我当前的代码和jsfiddle的链接更新了我的问题。我不能投票，因为我的声望只有6。 – chonito13

这是一个独立运行的示例，为您提供一个主意。您的代码将是这个样子：

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
//alert('Document is ready'); 
       $('#stSelect').change(function() { 
        var sel = $(this).val(); 
//alert('You picked: ' + sel); 
        $.ajax({ 
         type: "POST", 
         url: "another_php_file.php", // "another_php_file.php", 
         data: 'theOption=' + sel, 
         success: function(data) { 
//alert('Server-side response: ' + data); 
          $('#dd2DIV').html(data); 
          $('#theButton').click(function() { 
           alert('You clicked the button'); 
          }); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </head> 
<body> 

    <select name="students" id="stSelect"> 
     <option value="">Please Select</option> 
     <option value="John">John Doe</option> 
     <option value="Mike">Mike Williams</option> 
    </select> 
    <div id="dd2DIV"></div> 

</body> 
</html>

FILE：another_php_file.php

<?php 
$selStudent = $_POST['theOption']; 
if ($selStudent == 'John'){ 
    $r = ' 
     <select name="teachers" id="trSelect"> 
      <option value="">Please Select</option> 
      <option value="MrJones">Dr Bill Jones</option> 
      <option value="MrSmith">Dr Bob Smith</option> 
     </select> 
     <button id="theButton">Click Me</button> 
    '; 
    echo $r; 
}else if ($selStudent == 'Mike') { 
    $r = ' 
     <select name="teachers" id="trSelect"> 
      <option value="">Please Select</option> 
      <option value="MrPeters">Dr Bud Peters</option> 
      <option value="MrOz">Dr Bruce Oz</option> 
     </select> 
     <button id="theButton">Click Me</button> 
    '; 
    echo $r; 
}

Here are some additional examples你跟着，如果你想。

来源

2012-11-29 17:24:22 gibberish

在第一次选择填充后选择第二个选择，然后在第二个选择后添加按钮？

回答

相关问题