/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Select – display content before actually selecting an option

Hi.

I have two conditional select boxes:

[CODE]<script type=”text/javascript”>
$(document).ready(function () {
$department = $(“select[name=’prod’]”);
$ph = $(“select[name=’ph’]”);

$department.change(function () {

if ($(this).val() == “Apple”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”iphone4″>Iphone 4</option>”).appendTo($ph);
$(“<option value=”iphone5″>Iphone 5</option>”).appendTo($ph);
}

if ($(this).val() == “Samsung”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”galaxys2″>Galaxy S III</option>”).appendTo($ph);
$(“<option value=”galaxys3″>Galaxy S II</option>”).appendTo($ph);
}

if ($(this).val() == “Nokia”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”lumia900″>Lumia 900</option>”).appendTo($ph);
$(“<option value=”lumia800″>Lumia 800</option>”).appendTo($ph);
}

if ($(this).val() == “HTC”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=”htconex”>ONE X</option>”).appendTo($ph);
$(“<option value=”htcones”>ONE S</option>”).appendTo($ph);
$(“<option value=”htconev”>ONE V</option>”).appendTo($ph);
$(“<option value=”htcdesirec”>Desire C</option>”).appendTo($ph);
}

if ($(this).val() == “Brand”) {
$(“select[name=’ph’] option”).remove();
$(“<option value=””>Model</option>”).appendTo($ph);
}

});
$(function() {
$(‘#btn’).click(function(){
$(‘.phone’).hide();
$(‘#’ + $(this).val()).show();
});
});

});
</script>[/CODE]
[code=html]<form>
<select name=”prod”>
<option>Brand</option>
<option>Apple</option>
<option>HTC</option>
<option>Nokia</option>
<option>Samsung</option>
</select>
<select name=”ph” id=”selector”>
<option value=””>Model</option>
</select>
<input type=”button” id=”btn” value=”Show”>
</form>
<div class=”phone” id=”iphone4″ style=”display:none”>iphone4</div>
<div class=”phone” id=”iphone5″ style=”display:none”>iphone5</div>
Etc…[/code]

The conditional select boxes work fine, but try to select “Apple” – how do I display the selected option of #selector when the input button is clicked?

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@meekauthorSep 19.2012 — I actually managed to solve it by changing the button click function to:

[CODE]$('#btn').click(function(){
var selected = $("#selector").val();
$('.phone').hide();
$('#' +selected).show();
});[/CODE]
×

Success!

Help @meek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...