javascript - JQuery dynamic fields (ruby page) -
i have page redmine (an open source management program) in have show options in drop down list 2, depending on selected on drop down list 1.
here code made far, using jquery
if($("#categoryid1").val()=== "#categoryvalue1"){ $("#dynamiccategory option[value='categoryoptions1']").hide(); $("#dynamiccategory option[value='categoryoptions2']").hide(); $("#dynamiccategory option[value='categoryoptions3']").hide(); $("#dynamiccategory option[value='categoryoptions4']").show(); $("#dynamiccategory option[value='categoryoptions5']").show(); }else if($("categoryid1").val()=== "categoryvalue2"){ $("#dynamiccategory option[value='categoryoptions1']").show(); $("#dynamiccategory option[value='categoryoptions2']").show(); $("#dynamiccategory option[value='categoryoptions3']").hide(); $("#dynamiccategory option[value='categoryoptions4']").hide(); $("#dynamiccategory option[value='categoryoptions5']").hide(); } }
as can see, have 2 dropdown lists, 1 of them (categoryid1) have options, , these options define appears in dropdownlist called "dynamiccategory".
as can imagine, not best code, since have 5 options in category 1, , 1 line every single value in dynamiccategory
. reason, have 2 questions.
question 1: there way me hide()
multiple values @ once?
for example, tried , didn't work:
$("#dynamiccategory option[value='categoryoptions1' ,'categoryoptions2', 'categoryoptions3']").hide();
question 2: there way me make second category un-selectable user until chooses in category 1? fields should unavaiable/empty when page first loaded.
question 1:
using jquery id selector , element selector, can chain tag names in order select of option elements of first category selector , hide them:
$( "#categoryid1 options" ).hide();
if applied class options:
<select id="categoryid1" name="select"> <option class="first_category" value="tests">tests</option> <option class="first_category" value="development">development</option> <option class="first_category" value="pmo">pmo</option> </select>
then use jquery class selector:
$( 'first_category' ).hide();
question 2:
add disabled
property <select>
input:
<select id="dynamiccategory" disabled> ... </select>
or using jquery prop()
method, can disable dom elements on document ready:
$(document).ready( function() { $("#dynamiccategory").prop( "disabled", true ); });
remove disabled
property <select>
input on change of first, using change():
$( "#categoryid1" ).change(function() { $("#dynamiccategory").prop( "disabled", false ); });
Comments
Post a Comment