Question

<select name="cat" class="input">
<option value="">----------Select Category--------</option>
<option value="Finance">Finance</option>
<option value="Travel">Travel</option></select>

<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="input">
<option value="">---------Select subcategory------</option>
<option value="Financial Planning">Financial Planning</option>
<option value="Financial Control">Financial Control</option>
<option value="Corporate Finance">Corporate Finance</option>
<option value="Financial Management">Financial Management</option>
<option value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>      
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>

如何在HTML中实现这一目标？我可以在HTML ???中使用if ...... else之类的语句

如何在HTML中实现动态启用和禁用？

Answer 1

首先，您需要在HTML页面中引用JQuery Lib。您可以按照link来理解它。

然后，您将需要一个数据结构来映射类别和子类别之间的关系。它看起来像这样：假设您已为每个id添加select个属性，与其各自的name相同。 var catAndSubCats = { 财务：[＆＃34;财务规划＆＃34;，＆＃34;财务控制＆＃34;，＆＃34;财务管理＆＃34;，＆＃34;财务报表＆＃34;]，旅行：[＆＃34;旅行计划＆＃34;，＆＃34;旅游管理＆＃34;，＆＃34;公司旅行＆＃34;] } 然后，您需要为$（＆＃39;选择[name = cat＆＃39;）编写一个onchange处理程序，您需要根据$('select[name=scat])中选定的选项文本过滤cat选项。

使用该事件，您可以根据猫的身份使用事件来填充您的select子目录：

<script>
  $(document).ready(function(){
       $("#cat").change(function () {
          var $selectedCat = $(this).find('option:selected').text();
          $("#subCat").html($("#subcat").filter(function () {
          return $.inArray($(this).text(), catAndSubCats[$selectedCat ]) >= 0;
         });
     });
</script>.

您可以将以上代码放在head文件的HTML标记中。请不要忘记JQuery Library的参考资料

我受到了这个solution的启发。我希望它会对你有所帮助

Answer 2

如上所述，您需要链接到jQuery库。这是我的解决方案，它需要在HTML中添加一些类（注意，我为了时间而内联所有这些）：

编辑**：事实证明，他们已经被禁用了＃39;选择框中选项的属性。我的上一个代码没有正常工作。这一个应该。请在最后看到更新的小提琴。

<select name="cat" class="first">
<option value="">----------Select Category--------</option>
<option class="finance" value="Finance">Finance</option>
<option value="Travel">Travel</option></select>

<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="second">
<option value="">---------Select subcategory------</option>
<option class="finance" value="Financial Planning">Financial Planning</option>
<option class="finance" value="Financial Control">Financial Control</option>
<option class="finance" value="Corporate Finance">Corporate Finance</option>
<option class="finance" value="Financial Management">Financial Management</option>
<option class="finance" value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>      
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>

<!-- Copy and past everything below right before the closing </body> tag in your HTML -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(document).ready(function(){
        $('select.first').change(function(){
            var sel = $('select.first option').map(function(){
                return $(this).attr('class');
            });

            for (i = 0; i < sel.length; i++) {
                if ($('select.first option:selected').hasClass(sel[i])) {
                    $('select.second option').not('select.second option:first-child, .' + sel[i]).prop('disabled', true);
                    $('select.second option.' + sel[i]).prop('disabled', false);
                }
            }
        });
    });
</script>

这是一个JSFiddle：http://jsfiddle.net/SQm9T/1/

如何根据html中其他选择框中的选择启用或禁用选项框？

2 个答案: