I must not be getting it, this is whati have now, and it is still not
working as needed.
$(document).ready(function() {
var $select = $('select#campaign_type_select');
var $value = $select.val();
var $coupon_div = $('#campaign_create_coupon');
var $broadcast_div = $('#campaign_create_broadcast');
var $contest_div = $('#campaign_create_contest');
$select.bind( 'change keydown', function() {
if ($(this).val() == 'contest') {
alert('contest');
$coupon_div.show();
$broadcast_div.hide();
$contest_div.hide();
}
else if ($(this).val() == 'broadcast') {
alert('broadcast');
$coupon_div.hide();
$broadcast_div.show();
$contest_div.hide();
}
else ($(this).val() == 'coupon') {
alert('coupon');
$coupon_div.hide();
$broadcast_div.hide();
$contest_div.show();
}
});
});
HTML -
<div class="form_data_wrap">
<div class="form_data_label">Campaign Type:</div>
<div class="form_data_value">
<select id="campaign_type_select">
<option value="coupon">Coupon</option>
<option value="broadcast">Broadcast</option>
<option value="contest">Contest</option>
</select>
</div>
</div>
On Jan 2, 2:48 am, "Michael Geary" <[email protected]> wrote:
> In an event callback function such as the one that's called from .change(),
> 'this' is not a jQuery object. It is a simple DOM element. You need to wrap
> it in $() to get a jQuery object if you want to use jQuery methods. Or, you
> can use DOM properties directly.
>
> I would also suggest using a $ prefix on a variable that represents a jQuery
> object. It's a good visual reminder that you can use jQuery methods on that
> variable.
>
> Also, when using an ID selector, it generally isn't necessary to include the
> tagname, and in fact the code will be faster if you omit it.
>
> For example:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> alert( $select.val() );
> $select.change( function() {
> alert( $(this).val() );
> });
> });
>
> Of course, in this particular case, since you already have the select
> element wrapped in a jQuery object, $select and $(this) (inside the change
> function) are the same thing, so you could also do:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> alert( $select.val() );
> $select.change( function() {
> alert( $select.val() );
> });
> });
>
> BTW, I highly recommend triggering on both the change event and the keydown
> event. This gives better usability when someone uses the keyboard:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> alert( $select.val() );
> $select.bind( 'change keydown', function() {
> alert( $(this).val() );
> });
> });
>
> The only thing to watch out for there is that you want to know if the value
> has actually changed on the keydown or not. This would take care of that:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> var value = $select.val();
> alert( value );
> $select.bind( 'change keydown', function() {
> var newvalue = $(this).val();
> if( newvalue != value ) {
> value = newvalue;
> alert( value );
> }
> });
> });
>
> -Mike
>
> > From: Bob O
>
> > Hello all,
> > a little new the js and jquery any help would be fantastic...
>
> > I have this in my linked myFx.js file:
>
> > $(document).ready(function() {
> > var selected_type = $('select#campaign_type_select');
> > var coupon_div = $('#campaign_create_coupon');
> > var broadcast_div = $('#campaign_create_broadcast');
> > var contest_div = $('#campaign_create_contest');
>
> > // alert(selected_type.val()); << I CAN GET THIS TO FIRE
> > WHEN UNCOMMENTED, and it returns the the value coupon as i
> > would expect.
>
> > BUT THIS ISNT WORKING ive tried various renditions
> > (this.val(), selected_type, etc...) based on what i have read
> > on this site and the jQuery site with 0 success.
>
> > selected_type.change(function() {
> > if (this.val() == 'contest') {
> > alert('contest');
> > }
> > else if (this.val() == 'broadcast') {
> > alert('broadcast');
> > }
> > else (this.val() == 'coupon') {
> > alert('coupon');
> > }
> > });
> > });
>
> > This is the HTML:
> > <div class="form_data_wrap">
> > <div class="form_data_label">Campaign Type:</div>
> > <div class="form_data_value">
> > <select id="campaign_type_select">
> > <option value="coupon">Coupon</option>
> > <option value="broadcast">Broadcast</option>
> > <option value="contest">Contest</option>
> > </select>
> > </div>
> > </div>
>
> > Someone point me in the right direction.....\m/>.<\m/
