想要显示和隐藏Divs基于下拉选择不起作用？ [英] Want to Show and Hide Divs based on drop down selection not working?

问题描述

我试图根据用户下拉选项显示和隐藏div，我想要的是当用户选择某个扇区时，将显示div将显示div pub并将其他隐藏在页面上。



代码目前无法运行，但我认为它的引用正确且无法找到问题。任何帮助都会很棒。



我的div命名如此

 <   div     id   =  Pubs >  
 <   div     id   = 理事会 >  
 < span class =code-k eyword><   div     id   = 属性 >  
 <   div     id   = 各种 >  

我的下拉列表，HTML

 <   div     id   =  Pub-Chains >  
 
 
 <   pre     lang   =  xml  >  <  表格 >  
 <   p  >  
 <   select     id   = 下拉列表    name   = 下拉菜单 >  
 <  选项    value   =  Pub -Chains    selected   = 选中 >  Pub Chains <   / option  >  
 <  选项    value   = 理事会 > 理事会<   / option  >  
 < span class =code-keyword><  选项    value   = 属性 > 属性<   / option  >  
 <  选项    value   = 各种 > 各种<   / option  >  
 < span class =code-keyword><  选项    value   = 大学 > 大学<  < span class =code-leadattribute> / option  >  
 <   / select  >  
 <   / p  >  
 < ;   / form  >  

JS

 <   script  >  
 
 $（'document'）。ready（function） （）{
 var select = $（'＃dropdown'）; 
 
函数showTab（name）{
 name ='＃'+ name; 
 $（'div'）。not（name）.hide（）; 
 $（name）.show（）; 
} 
 
 select.change（function（）{
 showTab（$（this）.val（））; 
}）; 
 
 showTab（select.val（））; 
 
 
 <   / script  >  

解决方案

（'document'）。ready（function（）{
var select =

（'＃dropdown'）;

函数showTab（name）{
name ='＃'+ name;

（'div'）。not（name）.hide（）;

I am attempting to show and hide divs based on a users drop down selection, what I want is when a user selects a sector say pubs the div pub will be displayed and the others hidden on the page.

The code is not working at the moment but I think its referenced correctly and cant find the issue.Any assistance would be great.

My divs are named like so

<div id="Pubs">
<div id="Councils">
<div id="Property">
<div id="Various">

My drop down list, HTML

<div id="Pub-Chains">


<pre lang="xml"><form>
              <p>
              <select id="dropdown" name="dropdown">
                  <option value="Pub-Chains" selected="selected"> Pub Chains </option>
                  <option value="Councils">Councils </option>
                  <option value="Property">Property </option>
                  <option value="Various">Various </option>
                  <option value="Universitys">Universitys </option>
              </select>
              </p>
          </form>

JS

<script>

$('document').ready(function () {
var select = $( '#dropdown' );

function showTab( name ) {
  name = '#' + name;
  $( 'div' ).not( name ).hide();
  $( name ).show();
}

select.change( function() {
  showTab( $( this ).val() );
});

showTab( select.val() );


</script>

解决方案

('document').ready(function () { var select =

( '#dropdown' ); function showTab( name ) { name = '#' + name;

( 'div' ).not( name ).hide();

这篇关于想要显示和隐藏Divs基于下拉选择不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！