如何使一个选择框的值驱动另一个选择框的选项 [英] How to make the value of one select box drive the options of a second select box

问题描述

我想用2个选择框制作HTML表单。第一个选择框中的选定选项应驱动第二个选择框中的选项。我想在客户端动态地解决这个问题（使用javascript或jQuery），而不是必须提交数据到服务器。

例如，我有以下菜单分类和菜单项：

• 三明治
  
  
  
  
  • 土耳其
  
  
  • 火腿
  
  
  • 培根
  
  
  li>
  
• 边
  
  
  
  
  • 苹果干酪
  
  
  • 马铃薯泥
  $饮料
  
  
  
  
  • 可口可乐
  
  
  • Sprite
  
  
  • Sweetwater 420
  
  
  
  
  
  

  I将有两个选择框，名为菜单分类和项目 ， 分别。当用户在菜单类别框中选择 Sandwiches 时， Items 框只显示三明治选项。

  
  
  

  为了让这更具挑战性，让我们假设我不知道菜单项或类别是什么，直到我准备好将页面发送给客户端。我需要一些方法来链接两个选择列表的数据，但我不知道如何做。

  
  
  

  我被卡住我该如何处理这个问题。一旦我筛选出第二个列表，当我在第一个列表中更改菜单类别时，如何查找列表选项？另外，如果我在SQL中思考，我会在第一个框中有一个键，用于链接到第二个框中的数据。但是，我无法看到第二个框中Key元素的空间。

  
  
  

  这个问题如何通过jQuery或plain javascript？

  解决方案

  查看动态云端硬盘，或者您也可以在Google上搜索 chained select for other examples。

  
  
  

  编辑：这是一个非常好的Remy Sharp教程：自动填充使用jQuery& AJAX

  
  
  

  ---

  
  
  

  好吧，因为我有强迫症，我把一个 demo 。
  
  

  它定义了一个变量，如果需要也可以加载为json。 p>
  
  

  HTML

   < select id =cat>< /选择> < select id =itemsdisabled>< / select> 
    

  脚本

    $（document）.ready（function（）{
   
   var menulist = {categories：[{
  category：Sandwiches，
  物品：[
   {name：土耳其}，
   {name：Ham}，
   {name：Bacon} 
  ] 
  ，
  category：Sides，
  items：[
   {name：Mac'n Cheese}，
   { name：土豆泥} 
  ] 
  }，{
  category：Drinks，
  items：[
   {name ：Coca Cola}，
   {name：Sprite}，
   {name：Sweetwater 420} 
  ] 
  }] 
   }; 
   
   var i，c ='< option>选择一个类别< / option>'，opt = $（'< option />'）; 
   var menu = menulist.categories; 
   
   for（i = 0; i< menu.length; i ++）{
  c + ='< option>'+ menu [i] .category +'< ; / options>'; 
  } 
   $（'＃cat'）
   .html（c）
   .change（function（）{
   var indx = this .selectedIndex  -  1; 
   if（indx <0）{ 
   $（'＃items'）。empty（）。attr（'disabled'，'disabled'）; 
   return; 
  } 
   var item ='< option>选择一个项目< / option>'; 
   for（i = 0; i< menu [indx] .items.length; i ++）{
   item + ='< option>'+ menu [indx] .items [i] .name +'< / options>'; 
   
   $（'＃items'）。html（item）.removeAttr（'disabled'）; 
  }）; 
   
  }）; 
    

  
  

  I want to make an HTML form with 2 select boxes. The selected option in the first select box should drive the options in the second select box. I would like to solve this dynamically on the client (using javascript or jQuery) rather than having to submit data to the server.

  For example, let's say I have the following Menu Categories and Menu Items:

  • Sandwiches
    • Turkey
    • Ham
    • Bacon
  • Sides
    • Mac 'n Cheese
    • Mashed Potatoes
  • Drinks
    • Coca Cola
    • Sprite
    • Sweetwater 420

  I would have two select boxes, named Menu Category and Items, respectively. When the user selects Sandwiches in the Menu Category box, the options in the Items box will only show Sandwich options.

  To make this more challenging, let's assume that I don't know what the menu items or categories are until I'm ready to send the page to the client. I'll need some way to "link" the data for the two select lists, but I don't know how that would be done.

  I'm stuck as how I might approach this. Once I filter out the 2nd list one time, how do I "find" the list options once I change my menu category in the 1st list? Also, if I'm thinking in SQL, I would have a key in the 1st box that would be used to link to the data in the 2nd box. However, I can't see where I have room for a "key" element in the 2nd box.

  How could this problem be solved with a combination of jQuery or plain javascript?

  解决方案

  Check out this example on Dynamic Drive, or you can search google for "chained select" for other examples.

  Edit: And here is a very nice Remy Sharp tutorial: Auto-populating Select Boxes using jQuery & AJAX

  ---

  Well, because I have OCD, I threw together a demo for you.

  It defines a variable could also loaded as json if required.

  HTML

  <select id="cat"></select> <select id="items" disabled></select>
  

  Script

  $(document).ready(function(){
  
  var menulist = { "categories" : [{
   "category" : "Sandwiches",
   "items" : [
     {"name": "Turkey"},
     {"name": "Ham"},
     {"name": "Bacon"}
    ]
   },{
   "category" : "Sides",
   "items" : [
     {"name": "Mac 'n Cheese"},
     {"name": "Mashed Potatoes"}
    ]
   },{
   "category" : "Drinks",
   "items" : [
     {"name": "Coca Cola"},
     {"name": "Sprite"},
     {"name": "Sweetwater 420"}
    ]
   }]
  };
  
  var i,c = '<option>Select a category</option>', opt = $('<option/>');
  var menu = menulist.categories;
  
  for (i=0; i < menu.length; i++){
   c += '<option>' + menu[i].category + '</options>';
  }
  $('#cat')
   .html(c)
   .change(function(){
    var indx = this.selectedIndex - 1;
    if (indx < 0) {
     $('#items').empty().attr('disabled','disabled');
     return;
    }
    var item = '<option>Select an item</option>';
    for (i=0; i < menu[indx].items.length; i++){
      item += '<option>' + menu[indx].items[i].name + '</options>';
    }
    $('#items').html(item).removeAttr('disabled');
   });
  
  });
  

  这篇关于如何使一个选择框的值驱动另一个选择框的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！