Looking to add "ALL" to an option with the Value of "79" with Javascript or JQuery
<select id="locations">
<option value="79"></option>
</select>
End Result should be:
<select id="locations">
<option value="79">ALL</option>
</select>
Thanks for any help :)
EDIT:
Turns out I also need it done to an checkbox too.
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span></span>
</label>
</li>
Again the end result should be:
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span>ALL</span>
</label>
</li>
The value is still "79" however the code for the first option didnt work on it.
Thanks again for any help!
You can access the element using attribute selector and set the text using text() method as follows:
$('option[value="79"]').text("ALL");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="locations">
<option value="79"></option>
</select>
or without jQuery:
document.querySelector('option[value="79"]').textContent = "ALL";
You can use attribute-equals-selector:
$('option[value=79]').text('ALL');
Related
I have a group of li elements, each li element is represented like this :
<li class="list"> <!--Parent-->
<input type="hidden" id="id" value="3"> <!--Child 1-->
<div class="cd-1">....</div> <!--Child 2-->
<div class="cd-2"> <!--Child 3 (event trigger)-->
<select class="reset">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="cd-3"> <!--Child 4-->
</li>
The js code that i tried :
$('.reset').addEventListener('change', function(event) {
if(event.target.tagName.toLowerCase() == 'select') {
console.log($('#id').val());
}
}
It returns the input value of the first li element, any ideas on how to access the input inside the li of the select that triggered the event ?
Thanks for your help!
You are mixing jQuery methods and vanilla methods like addEventListener.
Use one or the other but be consistent
Using jQuery alone you can do something like the following:
$('select.reset').change(function(){
// `this` is the select the event occurred on
const hiddenVal = $(this).closest('.list').find('input:hidden').val()
console.log('Hidden value:',hiddenVal)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="list">
<input type="hidden" id="id" value="3">
<div class="cd-1">....</div>
<div class="cd-2">
<select class="reset">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="cd-3">
</li>
I have an issue. I am trying to append option tag dynamically but its not coming properly using Jquery/Javascript.Here also I am using bootstrap chosen-select class. I am explaining my code below.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
My javascript code is given below.
var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
var obj=JSON.parse(data);
if(obj.isData==1){
$('#ctid').find('option').not(':first').remove();
$.each(obj.cid, function() {
$("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
})
}
})
Here also i am getting the data properly and the loop is also running.But its not reflecting at front end.when I did inspect element i got the below generated html code.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>
The raw html code is generating the above part after option added dynamically.But my problem is thosze are not display on the front end view.Please help me to resolve thisz issue.
I think each loop every object and gives index as its first param and val as second, try this:
$.each(obj.cid, function(idx, o) {
$("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});
If you would like to get the options in the resulting ul, then make sure to append them first before initing chosen.
$.each(obj, function(idx, o) {
$("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});
$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();
HTML
<div class="popover-content">
<p>
<select class="text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
Hope this helps
I was trying out getmdl-select with Vue2.0. in the view, I got it correct and working as expected, but it is not changing the model associated. Here is the code:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth">
<input class="mdl-textfield__input" id="age" name="age" v-model="age" type="text" readonly tabIndex="-1" data-val="1"/>
<label class="mdl-textfield__label" for="age">Age</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="age">
<li class="mdl-menu__item" data-val="1">1 Month Old</li>
<li class="mdl-menu__item" data-val="11">11 Month Old</li>
</ul>
</div>
I have put v-model="age" with input field as given above, but age variable is not updating when selecting values from dropdown.
However vanilla select input works fine:
<select v-model="age">
<option value="" disabled hidden>Select Age</option>
<option value="1">1 Month Old</option>
<option value="11">11 Month Old</option>
</select>
I tried to created a fiddle of this, however in fiddle, UI is not coming properly, in local at-least UI works properly.
Please let me know what am I doing wrong here.
try to use v-model.lazy
<input type="text" v-model.lazy="age"/>
docs
I am using the DDSlick plugin in my website. Everything is fine, I just want to add a filter type of thing in which there is a textbox on top. On entering text it will filter the results.
My current list box:
<select name="test">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
After using DDSlick plugin it becomes:
<ul class="dd-options dd-click-off-close" style="width: 260px; display: block;">
<li>
<a class="dd-option dd-option-selected">
<input class="dd-option-value" type="hidden" value="-1">
<label class="dd-option-text">Please Select From List</label>
</a>
</li>
<li>
<a class="dd-option">
<input class="dd-option-value" type="hidden" value="26">
<img class="dd-option-image" src="http://localhost/fifa/admin/server/packs/files/large-gold-if%20%284%29.png">
<label class="dd-option-text">test</label>
<small class="dd-option-description dd-desc">test</small>
</a>
</li>
</ul>
I believe DDslick does not have the feature that you are looking for.
I would recommend you bootstrap-select plugin. Check it out here. Lookup for the example that is using data-live-search="true".
This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help
You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.