Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 73
  • Last Modified:

Populate a select drop down OR show input box based on selection in previous dynamically populated drop down

Greetings!  I have a form where wedding guests choose the wedding party from a drop down,  then based on their choice, another drop down will display OR an input box will display.  And the first drop down with the wedding parties is dynamically populated from an Access table.

There is only one wedding party with 4 choices of deposit amounts.  The guests of the other wedding parties will fill in what they need to pay that's why I only need an input box for them.

 Is this possible?  Thanks in advance.
0
meldraper
Asked:
meldraper
  • 6
  • 3
2 Solutions
 
James BilousSoftware EngineerCommented:
Yes, in your dropdown list of wedding parties, annotate the special one that requires the dropdown of amounts with a data parameter so that you can handle it differently in jquery. Something like:

<select id="amountSelect">
  <option value="party1">party1</option>
  <option value="party2" enumerated="true">party2</option>
  <option value="party3">party3</option>
  <option value="party4">party4</option>
</select>

Open in new window


$("#amountSelect").change(function() {
   if ($("#amountSelect option:selected).attr("enumerated") !== undefined
   {
      //Create your dropdown
   } 
   else
   {
      //Create your input
   }
});

Open in new window

0
 
meldraperAuthor Commented:
I love this.  I'll try it right now...
0
 
meldraperAuthor Commented:
James, I'm getting an error on this line and I don't know enough about JQuery to figure it out.

 if ($("#amountSelect option:selected).attr("enumerated") !== undefined
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
James BilousSoftware EngineerCommented:
Oops, sorry, forgot a quote and a paren.

$("#amountSelect").change(function() {
   if ($("#amountSelect option:selected").attr("enumerated") !== undefined)
   {
      alert('enumerated');
   } 
   else
   {
      alert('input');
   }
});

Open in new window

0
 
meldraperAuthor Commented:
This is just great!  how do i add my select and input box?
0
 
James BilousSoftware EngineerCommented:
Check out this JS Fiddle, essentially you have the elements on the page already and show / hide them depending on the selection

https://jsfiddle.net/9jfg3mbu/
0
 
meldraperAuthor Commented:
Brilliant, thank you so much!!
1
 
zephyr_hex (Megan)DeveloperCommented:
Just want to note here that data attributes should be prefaced with the keyword "data".  An attribute called "enumerated" is not valid HTML.

The correct structure is:

<option value="party2" data-enumerated="true">party2</option>

Open in new window


And the correct way to access the attribute is:

if ($("#amountSelect option:selected").data("enumerated") !== undefined)

Open in new window

0
 
meldraperAuthor Commented:
Thank you!
0
 
meldraperAuthor Commented:
Thank you.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now