根据下拉列表中选定的选项显示详细信息

时间：2015-02-03 05:40:59

标签： javascript html

我有一个表格，我会从第一个下拉菜单中选择，然后会出现第二个下拉菜单。在第二个下拉列表中选择后，它必须显示一些细节。细节取决于他/她在第二次下拉菜单中选择的选项。

以下是代码：

<html>
<body>
Select: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="pasta9-12">pasta 9-12</option>
 <option value="pasta15-18">pasta 15-18</option>
 <option value="entree">entree</option>
</select>
<span id="slist2"></span> <div id="scontent"></div>

<script>
var SList = new Object(); 
var txtsl2 = '<br> Select Category:';

SList.slist2 = {
 "pasta9-12": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
 "pasta15-18": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
 "entree": ['chicken', 'fillet', 'pork']
}; //when selected, it should display 'SList.scontent2'

SList.scontent = {
 "fettucine jacintha" : 'Price is 700',
 "penne bolognese":'Price is 700',
 "pasta verde":'Price is 700',
 "lasagna roll-ups":'Price is 700',
 "baked creamy cheesy penne":'Price is 700',
 "trio of sausages fettucine": 'Price is 700'
};

SList.scontent2 = {
 "fettucine jacintha" : 'Price is 1000',
 "penne bolognese":'Price is 1000',
 "pasta verde":'Price is 1000',
 "lasagna roll-ups":'Price is 1000',
 "baked creamy cheesy penne":'Price is 1000',
 "trio of sausages fettucine": 'Price is 1000'
}; // This should be displayed when 'pasta 15-18' is selected.

SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';     

  if(SList[slist][option]) {
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
    else if(slist == 'slist2') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }
  }
  else if(slist == 'slist2') {
    document.getElementById('slist2').innerHTML = '';
  }
}
--></script>
</body>
</html>

我想在选择面食9-12时显示SList.scontent。并且当选择面食15-18时SList.scontent2显示。

非常感谢你！

2 个答案:

答案 0 :(得分：0)

<html>
<body>
Select: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="pasta9-12">pasta 9-12</option>
 <option value="pasta15-18">pasta 15-18</option>
 <option value="entree">entree</option>
</select>
<span id="slist2"></span> <div id="scontent"></div>

<script>
var SList = new Object(); 
var txtsl2 = '<br> Select Category:';

SList.slist2 = {
 "pasta9-12": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
 "pasta15-18": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
 "entree": ['chicken', 'fillet', 'pork']
}; //when selected, it should display 'SList.scontent2'

SList.scontent = {
 "fettucine jacintha" : 'Price is 700',
 "penne bolognese":'Price is 700',
 "pasta verde":'Price is 700',
 "lasagna roll-ups":'Price is 700',
 "baked creamy cheesy penne":'Price is 700',
 "trio of sausages fettucine": 'Price is 700'
};

SList.scontent2 = {
 "fettucine jacintha" : 'Price is 1000',
 "penne bolognese":'Price is 1000',
 "pasta verde":'Price is 1000',
 "lasagna roll-ups":'Price is 1000',
 "baked creamy cheesy penne":'Price is 1000',
 "trio of sausages fettucine": 'Price is 1000'
}; // This should be displayed when 'pasta 15-18' is selected.

SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';     

  if(SList[slist][option]) {
    if(slist == 'scontent'){
		document.getElementById('scontent').innerHTML = SList[slist][option];
	}else if(slist == 'scontent2'){
		document.getElementById('scontent').innerHTML = SList[slist][option];
	} else if(slist == 'slist2' && option=='pasta9-12') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }else if(slist == 'slist2' && option=='pasta15-18'){
		var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent2\', this.value);">'+addata+'</select>';
	}
  }
  else if(slist == 'slist2') {
    document.getElementById('slist2').innerHTML = '';
  }
}
--></script>
</body>
</html>

我认为这就是你要找的......

答案 1 :(得分：0)

我想出了这个...... 

<html>
<body>
<!-- The first select list -->
Select: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="pasta9-12">pasta 9-12</option>
 <option value="pasta15-18">pasta 15-18</option>
 <option value="entree">entree</option>
</select>
<!-- Tags for the second dropdown list, and for text-content -->
<span id="slist2"></span> <div name="scontent" id="scontent"></div> <div name="scontent2" id="scontent2"></div>

<script>
var SList = new Object(); 
var txtsl2 = '<br> Select Category:';

SList.slist2 = {
 "pasta9-12": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
 "pasta15-18": ['Fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
 "entree": ['chicken', 'fillet', 'pork']
};

SList.scontent = {
 "fettucine jacintha" : 'Price is 700',
 "penne bolognese":'Price is 700',
 "pasta verde":'Price is 700',
 "lasagna roll-ups":'Price is 700',
 "baked creamy cheesy penne":'Price is 700',
 "trio of sausages fettucine": 'Price is 700'
};

SList.scontent2 = {
 "Fettucine jacintha" : 'Price is 1000',
 "penne bolognese":'Price is 1000',
 "pasta verde":'Price is 1000',
 "lasagna roll-ups":'Price is 1000',
 "baked creamy cheesy penne":'Price is 1000',
 "trio of sausages fettucine": 'Price is 1000'
};

SList.getSelect = function(slist, option) {
  document.getElementById('scontent' && 'scontent2').innerHTML = ''; 


  if(SList[slist][option]) {
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
    else if(slist == 'scontent2') document.getElementById('scontent2').innerHTML = SList[slist][option];

    else if(slist == 'slist2' && option=='pasta9-12') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }
      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }

    else if(slist == 'slist2' && option=='pasta15-18'){
        var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }
      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent2\', this.value);">'+addata+'</select>';
    }

  }
  else if(slist == 'slist2') {
    document.getElementById('slist2').innerHTML = '';
  }
}
</script>
</body>
</html>

它也有效:)但我认为你的方式更好。顺便说一下，非常感谢你的帮助！

相关问题
最新问题