Question

我写了一个javascript代码，用于在用户选择选项时获取多个文本框，但是当我选择一个选项时，我只能选择一个文本框。我不知道这段代码我错在哪里。

添加代码段

<html> 
<head>  
 <script type="text/javascript">
function CheckColors(val){
/************************************************/
 var element=document.getElementById('offer');
 if(val=='color'||val=='offer')
   element.style.display='block';
 else  
   element.style.display='none';
/************************************************/
	
var element=document.getElementById('store');
 if(val=='color'||val=='store')
   element.style.display='block';
 else  
   element.style.display='none';
	   

/*********************************/
var element=document.getElementById('event');
 if(val=='color'||val=='event')
   element.style.display='block';
 else  
   element.style.display='none';
/*********************************/
var element=document.getElementById('posting');
 if(val=='color'||val=='posting')
   element.style.display='block';
 else  
   element.style.display='none';
	   
}

</script>
</head>
<body>
  <select name="postType" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option value="offer">Offer</option>
    <option value="store">Store</option>
    <option value="event">Event</option>
    <option value="posting">Posting</option>
  </select>
<input type="text" name="Offer" id="offer" placeholder="OFFER" style='display:none;'/>
<input type="text" name="Offer" id="offer" placeholder="OFFER" style='display:none;'/>

<input type="text" name="Store" id="store" placeholder="STORE" style='display:none;'/>
<input type="text" name="Store" id="store" placeholder="STORE" style='display:none;'/>

<input type="text" name="Event" id="event" placeholder="EVENT" style='display:none;'/>
<input type="text" name="Event" id="event" placeholder="EVENT" style='display:none;'/>

<input type="text" name="Posting" id="posting" placeholder="POSTING" style='display:none;'/>
<input type="text" name="Posting" id="posting" placeholder="POSTING" style='display:none;'/>
</body>
</html>

Answer 1

根据您的逻辑休息，您可以添加条件

 <html> 
    <head>  
     <script type="text/javascript">
    function CheckColors(val){

     document.getElementById('mapp').style.display='block';
    }

    </script>
    </head>
    <body>
      <select name="postType" onchange='CheckColors(this.value);'> 
        <option>pick a color</option>  
        <option value="offer">Offer</option>
        <option value="store">Store</option>
        <option value="event">Event</option>
        <option value="posting">Posting</option>
      </select>



    <div id="mapp" style="display:none;">
      <input type="text" name="Offer" id="offer" placeholder="OFFER" />
      <input type="text" name="Store" id="store" placeholder="STORE" />
      <input type="text" name="Event" id="event" placeholder="EVENT"/>
      <input type="text" name="Posting" id="posting" placeholder="POSTING" />
      </div>
    </body>
    </html>

在使用javascript选择选项上获取多个文本框时出现问题

1 个答案: