jquery - Default selected value on select are not visible when change value dynamically -


i have 3 select dropdowns 2nd , 3rd depended on choice of 1st dropdown.

each of them has default choice show when page loads. managed make work, 2nd , 3rd dropdowns change options based on first one, however, 2 stays empty on load if first choice selected when click on them.

html

<div id="additional-number-options-284">   <select class="form-control" id="select-additional-number-country-284">     <option disabled="disabled" selected="selected">select country</option>     <option value="7818">country 1</option>     <option value="7814">country 2</option>   </select>   <select id="select-additional-number-state-284">     <option disabled="disabled" selected="selected">select state</option>     <option data-product="7818" value="65">state 4</option>     <option data-product="7818" value="66">state 5</option>     <option data-product="7814" value="62">state 1</option>     <option data-product="7814" value="63">state 2</option>     <option data-product="7814" value="64">state 3</option>   </select>   <select id="select-additional-number-plan-284">     <option disabled="disabled" selected="selected">select plan</option>     <option data-product="7818" value="7819">plan d (+$5.00)</option>     <option data-product="7818" value="7820">plan e (+$15.00)</option>     <option data-product="7814" value="7815">plan (+$10.00)</option>     <option data-product="7814" value="7816">plan b (+$8.00)</option>     <option data-product="7814" value="7817">plan c (+$12.00)</option>   </select> </div>

jquery

jquery("[id^=select-additional-number-country-]").change(function() {   var id = this.id.split('-').pop();   jquery("#select-additional-number-state-" + id)     .find("option")     .show()     .not("option:first, option[data-product='" + this.value + "']")     .hide();    jquery("#select-additional-number-state-" + id).val(     jquery("#select-additional-number-state" + id).find("option:visible:first").val());    jquery("#select-additional-number-plan-" + id)     .find("option")     .show()     .not("option:first, option[data-product='" + this.value + "']")     .hide();    jquery("#select-additional-number-plan-" + id).val(     jquery("#select-additional-number-plan" + id).find("option:visible:first").val());  }).change();

jsfiddle code

the issue because attribute begins selector invalid. need wrap value in quotes - not interpreted correctly. try this:

jquery(function($) {    $('[id^="select-additional-number-country-"]').change(function() {      var id = this.id.split('-').pop();      $("#select-additional-number-state-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide();      $("#select-additional-number-plan-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide();    }).change();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="additional-number-options-284">    <select class="form-control" id="select-additional-number-country-284">      <option disabled="disabled" selected="selected">select country</option>      <option value="7818">country 1</option>      <option value="7814">country 2</option>    </select>    <select id="select-additional-number-state-284">      <option disabled="disabled" selected="selected" value="">select state</option>      <option data-product="7818" value="65">state 4</option>      <option data-product="7818" value="66">state 5</option>      <option data-product="7814" value="62">state 1</option>      <option data-product="7814" value="63">state 2</option>      <option data-product="7814" value="64">state 3</option>    </select>    <select id="select-additional-number-plan-284">      <option disabled="disabled" selected="selected" value="">select plan</option>      <option data-product="7818" value="7819">plan d (+$5.00)</option>      <option data-product="7818" value="7820">plan e (+$15.00)</option>      <option data-product="7814" value="7815">plan (+$10.00)</option>      <option data-product="7814" value="7816">plan b (+$8.00)</option>      <option data-product="7814" value="7817">plan c (+$12.00)</option>    </select>  </div>

two other things note here. firstly use of aliased $ parameter of document.ready event handler. allows use $ instead of verbose jquery within scope of function.

secondly convoluted use of val() not required. can call val('') reset selected option when dependant select changed.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more