关联菜单 (爽)

 <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5

arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7

function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "[SELECT]" ;
  controlToPopulate.add(myEle) ;
for ( x = 0 ; x < ItemArray.length  ; x++ )
    {
      if ( GroupArray[x] == control.value )
        {
          myEle = document.createElement("option") ;
          myEle.value = x ;
          myEle.text = ItemArray[x] ;
          controlToPopulate.add(myEle) ;
        }
    }
}
//  End -->
</script>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice οnchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
    <option value=0 SELECTED>[SELECT]</option>
    <option value=1>Land</option>
    <option value=2>Sea</option>
    <option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice οnchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果要实现左侧菜单和tab选项的关联,可以在左侧菜单的每个菜单项上绑定一个`id`,并在tab选项中添加一个对应的`id`属性来标识选项。当点击左侧菜单时,可以触发一个事件,将对应的tab选项激活。具体实现步骤如下: 1. 在左侧菜单组件中,为每个菜单项绑定一个`id`属性,例如: ``` <template> <div> <div v-for="item in menu" :key="item.id" @click="activateTab(item.id)"> {{ item.name }} </div> </div> </template> <script> export default { data() { return { menu: [ { id: 1, name: '菜单项1' }, { id: 2, name: '菜单项2' }, { id: 3, name: '菜单项3' } ] } }, methods: { activateTab(id) { this.$emit('activate-tab', id) // 触发父组件的事件 } } } </script> ``` 在这个例子中,左侧菜单的每个菜单项都绑定了一个`id`属性,并在点击时调用`activateTab`方法,将菜单项的`id`传递给父组件。 2. 在tab选项组件中,添加一个`id`属性来标识选项,例如: ``` <template> <div class="tab" :class="{ active: isActive }"> {{ title }} </div> </template> <script> export default { props: { id: { type: Number, required: true }, title: { type: String, default: '' } }, data() { return { isActive: false } }, methods: { activate() { this.isActive = true }, deactivate() { this.isActive = false } } } </script> ``` 在这个例子中,tab选项组件接受一个`id`属性来标识选项,并在`data`中定义了一个`isActive`属性来表示选项是否激活。 3. 在父组件中,监听左侧菜单的`activate-tab`事件,并根据传递的`id`值找到对应的tab选项,并将其激活,例如: ``` <template> <div> <left-menu @activate-tab="activateTab"></left-menu> <tab v-for="tab in tabs" :key="tab.id" :id="tab.id" :title="tab.title" ref="tabs"></tab> </div> </template> <script> export default { data() { return { tabs: [ { id: 1, title: '选项卡1' }, { id: 2, title: '选项卡2' }, { id: 3, title: '选项卡3' } ] } }, methods: { activateTab(id) { this.$refs.tabs.forEach(tab => { if (tab.id === id) { tab.activate() } else { tab.deactivate() } }) } } } </script> ``` 在这个例子中,父组件监听了左侧菜单的`activate-tab`事件,并在事件处理函数中遍历所有的tab选项,找到对应的选项并将其激活。这里使用了`ref`来获取tab选项组件的实例,可以通过实例的`id`属性来判断选项是否匹配。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值