javascript - How can I show/hide options in a select when another option is selected - Stack Overflow
to customize your list.
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
J it only takes a minute:
I'm trying to make an Unnoficial character creation tester for the popular game Mount & Blade. The script should in theory, depending on the options chosen, determine the characters stats as it would do in game.
At the moment when I choose male/female in the select box none of the specified fields disappear. What have I done wrong?
When the stats are changed I want to automatically display them in
a tabular form, would that require me to give an id to each td or could I somehow reference which cell so like the third cell from the left two cells down would be table1(3,2) or is that too difficult/impossible?
Here is the Javascript:
//Base Stats -
var sG // Male or Female
var iAgi = 6;
var iStr = 5;
var iInt = 5;
var iCha = 5;
$("#selGender").change(function() {
var mnf = $(this).val();
sGender = parseInt(mnf);
if (sGender = 1){
//Show/hide options
$('#fnomad').hide();
$('#fnoble').hide();
$('#fsquire').hide();
$('#mnomad').show();
$('#mnoble').show();
$('#msquire').show();
this.disabled=
$('#mnomad').hide();
$('#mnoble').hide();
$('#msquire').hide();
$('#fnomad').show();
$('#fnoble').show();
$('#fsquire').show();
this.disabled=
Here is the HTML
&legend&Choose your background:&/legend&
&label&Gender&/label&
&select id="selGender"&
&option value="1" &Male&/option&
&option value="2"&Female&/option&
&label&Your father was ...&/label&
&select id="selFather"&
&option id="fnoble" value="fnoble"&a Noble&/option&
&option id="mnoble" value="mnoble"&a Noble&/option&
&option value="merchant"&a Merchant&/option&
&option value="vetwarrior"&a Veteran Warrior&/option&
&option value="thief"&a Thief&/option&
&option id="fnomad" value="fnomad"&a Nomad&/option&
&option id="mnomad" value="mnomad"&a Nomad&/option&
EDIT: Also, I've made sure I've linked to the jQuery file in the header.
&script type="text/javascript" src="jquery.min.js"&&/script&
EDIT2: this is the section where mSquire and fSquire are:
&label&When you grew to a young adult, you became a ...&/label&
&select id="selAdult"&
&option id="msquire" value="msquire"&a Squire&/option&
&option id="fsquire" value="fsquire"&a Lady in waiting&/option&
&option value="troubadour"&Troubadour&/option&
&option value="student"&Student&/option&
&option value="peddle"&Peddler&/option&
&option value="poacher"&Poacher&/option&
Instead of showing/hiding each element, you can add classes to them:
&select id="selFather"&
&option id="fnoble" value="fnoble" class="f"&a Noble (f)&/option&
&option id="mnoble" value="mnoble" class="m"&a Noble (m)&/option&
&option value="merchant"&a Merchant&/option&
&option value="vetwarrior"&a Veteran Warrior&/option&
&option value="thief"&a Thief&/option&
&option id="fnomad" value="fnomad" class="f"&a Nomad (f)&/option&
&option id="mnomad" value="mnomad" class="m"&a Nomad (m)&/option&
$('.f').hide();
$('.m').show();
You could also create a CSS stylesheet with: .f{display:none} .m{display:}
Your code has a problem: if you have ...
&select id="selGender"&
&option value="1" &Male&/option&
&option value="2"&Female&/option&
... the default selected value is "Male", so if you select it it doesn't trigger onchange event. You can use
&select id="selGender"&
&option selected="selected" disabled="disabled"&Select gender:&/option&
&option value="1" &Male&/option&
&option value="2"&Female&/option&
Moreover, you have
if (sGender = 1)
You should use
if (sGender == 1)
because you are comparing, not setting values.
About your other question (navigate through a table), you can create a JavaScript function which does that. But I don't understand very well what you want with "the third cell from the left two cells down".
If I understand well you have a table like
&table id="table"&
&td&Skill 1&/td&
&td&Skill 2&/td&
&td&Skill 3&/td&
&td&Value 1&/td&
&td&Value 2&/td&
&td&Value 3&/td&
And you want
table(1,1)=Skill 1 cell
table(1,2)=Value 1 cell
table(2,1)=Skill 2 cell
table(2,2)=Value 2 cell
function table(col,row){
return document.getElementById('table').tBodies[0].getElementsByTagName('tr')[row-1].getElementsByTagName('td')[col-1];
See it here:
104k13141203
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
rev .24719
Stack Overflow works best with JavaScript enabledjavascript - JS show/hide div - Stack Overflow
to customize your list.
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
J it only takes a minute:
visibility:
width: 200
height: 200
background-color:
&script type="text/javascript"&
function showStuff(a_x200) {
document.getElementById(a_x200).style.display = 'block';
&div id="a_x200"&asd&/div&
&innput type="button" class="button_p_1" onclick="showStuff('a_x200');"&&/input&
Not working I think I missed something!
1,01011028
document.getElementById('a_x200').style.visibility = 'visible';
You can try this code:
HTML Code:
&div id="a_x200" style="display:"&asd&/div&
&input type="button" class="button_p_1" onclick="showStuff('a_x200');"&&/input&
Java script:
&script type="text/javascript"&
function showStuff(id) {
document.getElementById(id).style.display = "block";
Try this code it will solve your problem.
Here you can se one example i created in jquery
&script src="/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"&&/script&
.slidingDiv {
height:300
background-color: #99CCFF;
padding:20
margin-top:10
border-bottom:5px solid #3399FF;
.show_hide {
&script type="text/javascript"&
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
&a href="#" class="show_hide"&Show/hide&/a&
&div class="slidingDiv"&
Fill this space with really interesting content. &a href="#" class="show_hide"&hide&/a&&/div&
You're using visibility: hidden to hide it, then attempting to use the display CSS property to make it visible. They're two completely separate properties, changing one won't magically change the other.
If you want to make it visible again, change the value of the visibility property to visible:
document.getElementById('a_x200').style.visibility = 'visible';
31.5k34264
try this...
function showStuff(id) {
document.getElementById(id).style.display = 'block'; // OR
document.getElementById(id).style.visibility = 'visible';
If you notice on your button click onclick="showStuff('a_x200');". you have already sent the id as a parameter to your function.. so i am taking
the parameter and using it.
in your case have the parameter but
not using it... though it does the samething...
OR u can do this
&input type="button" class="button_p_1" onclick="showStuff();"&&/input&
// omitting double 'n'
function showStuff() {
document.getElementById('a_x200').style.display = 'block';
// missing curly bracket
this both does the same thing
26.8k62551
your input is miss spled
Should be like this:
&script type="text/javascript"&
function showStuff(a_x200) {
document.getElementById(a_x200).style.display = 'block';
&div id="a_x200"&asd&/div&
&innput type="button" class="button_p_1" onclick="showStuff('a_x200');"&&/input&
2,19822049
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
rev .24719
Stack Overflow works best with JavaScript enabledhide options
Show/Hide Tools显示/隐藏工具&
Show/Hide Options显示/隐藏选项&
Show/Hide Navigator显示/隐藏导航& ...
基于60个网页-
关闭百宝箱
首先输入关键字“减肥产品”OK后，我们在谷哥最左边点百宝箱里的“神奇罗盘”，默认是Hide options(关闭百宝箱)，用户可以点show options(搜索百宝箱)，出现如下图：
基于6个网页-
...钮之后，常有“More options（更多选项）”链接，点击可以打开更多的产品属性列表；打开后，链接变为“Hide options（隐藏选项）”；同样，搜索的产品关键词不同，更多选项的属性及其列表内容也不同。
基于6个网页-
隐藏高级选项
隐藏视图设置
隐藏工具选项
显示/隐藏选项
隐藏微软项目
Help:停止浏览图片的方法
更多收起网络短语
The options are Keep on top, Hide this column, and Wrap to second row.
选项有 Keep on top、Hide this column 和 Wrap to second row。
For people who want to hide their hearing aids, there are a few options, but they can be expensive.
对于想要隐藏助听器的人来说，有不多的几个选择，但非常昂贵。
Select the following options in the Actions to Hide section, which displays in the Edit mode of the authoring template
在 Actions to Hide 区段中选择以下选项，该区段显示在创作模板的 Edit 模式下
Grab a tiny handle and drag photos off the screen to the left, then tap an arrow on the right to hide editing options.
"I do not believe that all options have been looked at, and cannot hide my disappointment at the way in which this decision has been reached, " he said.
San Francisco-based Dropbox initially tried to hide its free version when it launched in 2008 to encourage more users to choose the pay options—especially users acquired through costly Web-marketing efforts.
$firstVoiceSent
- 来自原声例句
请问您想要如何调整此模块？
感谢您的反馈，我们会尽快进行适当修改！
请问您想要如何调整此模块？
感谢您的反馈，我们会尽快进行适当修改！