根据用户的决定禁用所选选项

时间:2015-04-25 07:13:11

标签: jquery html select options

我正在尝试创建一个开放的环境供用户选择一个特定的选项,但同时给他们提供了以任何顺序选择它们的开放机会,同时消除了他们选择的选择。到目前为止,我的代码在按顺序执行时阻止了我。基本上,选择和选项会在一个范围内弹出。他们选择一个。结果在该范围内提供,同样的选项似乎消除了他们已经选择的那个。

这是HTML代码

<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>

<span id='FBI'>
<p>"We're undercover students working with the FBI," you say.</p>
<p>"Get outta here before I put you both in cuffs!" he yells.</p>
<p>"Good job, <?php echo $_GET['Name']?>! You almost got us busted.."   </p>
<p>"Come on, Korra, let's try one more! Over there!" you exclaim.</p>
<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>
</span>

<span id='super'>
<p>"Let us through, we're bulletproof!" you fearlessly say.</p>
<p>"Are ya now?" asks the cop as he lightly bops you over the head with his fist.</p>
<p>"OW!" you yell.</p>
<p>"Run along and go play somewhere else, stupid kid!"</p>
<p>You and Korra walk away feeling defeated.</p>
<p>"Any other ideas, <?php echo $_GET['Name']?>?" she asks.</p>
<p>"One more try!" you say as you run over to another police officer.</p>
<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>
</span>

<span id='confess'>
<p>"It was us!"</p>
<p>"Alright off to jail you go!" says the officer.</p>
You get escorted off to jail. THE END.
</span>

这里是jQuery

//Keeps the spans containing the respondes hidden until an option is selected for the lietocops page

$('#lies').change(function(){
var contact = $(this).val();

// Hides the list / show list

if ( contact == ""){
 $('#lies').show();
}else{
$('#lies').hide();
}

$("#lies option:selected").attr('disabled','disabled')
    .siblings().removeAttr('disabled');

// lie responses

if( contact == "FBI") {
 $('#FBI').fadeIn();
}else if( contact == "super") {
 $('#super').fadeIn();
}else if( contact == "confess") {
 $('#confess').fadeIn();
 }
});

1 个答案:

答案 0 :(得分:0)

首先,您遇到多个ID的问题,这是不允许的。你需要让他们上课。

并为你的故事情节提供一个课程(例如故事情节)。

所以选择的东西

var $lies = $(".lies");
$lies.change(function(){
$("#firstLie").hide();
var $this = $(this);
var contact = $this.val();
var $currentStoryline = $this.closest(".storyline");
var $selectedOptions = $(".lies").find("option[value='" + contact + "']");
$selectedOptions.prop("disabled", true);    
$lies.val("");
$currentStoryline.fadeOut();
$("#" + contact).fadeIn();