Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Changing content using php based on selected option

Featured Replies

Hi all

 

Got a problem that is probably very simple and would appreciate any help that anyone can offer.

 

I have a normal select field in a form with 2 options, what im trying to do is generate new content (in this case another select field) based on what option the user chooses (but not by clicking a submit button just by selecting a option).

 

Based on my very limited web design knowledge I think ajax will play a part to update the content without a page refresh but im just not sure how to go about it.

 

Any help would be greatly appreciated.

 

Best regards

 

David

$(function(){ // This is just a jQuery shorthand for: onPage load, do everything inside here...

// This adds an onchange event handler to the select element
// with the data-role value of 'initial-selector'
$("select[data-role='initial-selector']").on('change', function(){
// Gets the selected index of the initial-selector select element
// the selected index is an integer value 0 -> number of options-1
var index = this.selectedIndex;
// Hide all of the other selects using a simple js-hide class
// this line hides all select elements with that class
$("select.hide-js").hide();
// Now show the appropriate select element using the index
// we got previously – uses the data-role property again
// If the index is 1, then this line chooses selector-1
// if the index is 2, then this line chooses selector-2, and so on...
$("select[data-role='selector-" + index + "']").show();
});

// onLoad, just hide the select boxes initially – this is better than
// CSS as it allows for non-js users to still use the form at least
$("select.hide-js").hide();

}); // End of the initial function (jQuery shorthand onPage load)

Edited by andy9l

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.