I need to select a select box which is not having any class name
Minute : <select name="dob_minute'+$i+'[]" class="" style="width: 56px">
<option value="">--------</option></select>
I can not select it by using name. I am having some other issues in it. That is the reason that I am not selecting by name
This will select any select element that has a name attribute that begins with 'dob_minute' so it doesn't matter what variables are added after that.
$('select[name^="dob_minute"]');
You can use the attribute selector:
$('select[class=""]')
You can locate the select using attribute equals selector like below,
For a select like below,
<select name="mySelect">
<option>...</option>
</select>
You can find the select using attribute equals selector below,
$('select[name="mySelect"]').val();
var select = document.getElementsByName("dob_minute'+$i+'[]")[0];
Use the select like this
$('select[name=dob_minute]').val()
Related
I'm trying to select an option from a select dropdown with the text() attribute of the HTML element with cheerio. So far what I'm doing is that I'm trying to set the attr as selected matching, the element with the specific text.
This is what I'm trying:
$('#ddl_city option[text="testing"]').attr('selected', 'selected');
I'm not getting any changes on the html when I do this. I print the html document on the console after doing this operation and I don't see that the option has changed to the one I'm selecting. Any idea why is not working or another workaround?
You can try this:
$('#ddl_city option').
filter(function () { return $(this).text() == 'testing'; }).
attr('selected', true);
Credits to Godsbest's answer in this post on the jQuery forum.
You can use the :contains filter to get the specific option element based on the text and set the value of the select element to it's value:
$('#s1').val($("#s1 option:contains('Val B')").val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option value="a">Val A</option>
<option value="b">Val B</option>
</select>
how to get the selected text of the option.
<select class="float-left groupNames" name="Group">
<option value="preview[object Object]0">test</option>
<option value="preview[object Object]1">test1</option>
<option value="preview[object Object]2">test2</option>
</select>
I tried $(".groupNames option:selected").text();
but its not the right value. so I am getting testtest2 if I am selecting the third option.
$(".groupNames").val() is all you need.
jsFiddle example
However if you have multiple .groupNames elements, you'll need to be more specific with the selector.
$(".groupNames option:selected").text(); as you probably saw, will get the selected option's text, not the select's value.
hi please add an id to easily access the select here is an tested fiddle http://jsfiddle.net/elviz/259m3qkb/1/
$("#newSkill").change(function(){
var kamote = document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;
alert(kamote);
});
Is there a way to clear all option and optgroup HTML elements by using jquery?
My HTML select element is like this,
<select id="users" name="multiselect" multiple="multiple" style="width:382px;" >
<optgroup id="groupadmin" label="Group Admin"></optgroup>
<optgroup id="systemusers" label="System User"></optgroup>
</select>
You can use .empty()
Description: Remove all child nodes of the set of matched elements from the DOM.
Code
$('#users').empty()
Fiddle
EDIT
As you are using multiSelect plugin, You need to use .multiSelect('refresh') method.
$('#users').empty().multiSelect('refresh');
Updated Fiddle
Try this code
$('#users').find('optgroup,option').remove();
Use the following code :
$('#users').children().remove();
This will work irrespective of whether an optgroup is present or not
I've got a fancy select with code similar to the following, yet adding the selected=selected attribute to one of the options (with JS) does not change which item is currently selected.
<li class="field">
<div class="picker">
<select>
<option value="#" disabled>Favorite Doctor…</option>
<option>Colin Baker</option>
<option>Sylvester McCoy</option>
<option>Paul McGann</option>
<option>Christopher Eccleston</option>
<option>David Tennant</option>
<option>Matt Smith</option>
</select>
</div>
</li>
How can I change the selected option and have this change reflected in the select box.
Try to trigger the change event after you set the selected option, for example:
$('option:eq(2)').prop('selected',true).trigger('change'); // or .change()
Fiddle Demo
Solved it by setting the select.val() to the text of the option I'm trying to select.
I solved it by mending FS's code. It was using :selected as a selector. Changed it to [selected="selected"] and it behaved. Best to just avoid FS completely though, in my opinion. I inherited it on a project I'm working on.
Around line 56 in my copy, now changed to:
triggerHtml = settings.triggerTemplate(sel.find('[selected="selected"]'));
I have been using Zend Framework 1 to create a dependent/chained Zend_Form.
When a Zend_Form_element_Select another Zend_Form_Element_Select is added to the form with correct fields dependant on the first select's value.
So I add the new Select with a:
$("#city-label").before(data);
which will insert the new select before the city label.
The problem arises when the first select's value is changed again. Then a new Select is added to the form. I would Ideally like the old satellite element that is the label and the select to be removed.
<dt id="satellite-label">
<label for="satellite" class="optional">Satelite</label>
</dt>
<dd class="ui-select">
<select name="satellite" id="satellite">
<option value="--Select One--" label="--Select One--">--Select One--</option>
<option value="5" label="Alex">Alex</option>
<option value="6" label="Patro">patro</option>
<option value="7" label="Zozo ">Zozo</option>
</select></dd>
<dt id="city-label"><label for="city" class="optional">City</label></dt>
And then replaced with the new element.
Try this from within your AJAX success:
$("#satellite-label").remove();
$("#satellite").parent().remove();
You should keep track of the new element so you can remove it when the value changes again:
var currentLabel;
...
if (currentLabel) {
currentLabel.remove();
}
currentLabel = $(data);
$("#city-label").before(currentLabel);
try this ...
$("#satellite_elem-label").remove();
$("#satellite_elem").parent().remove();;
$("#city-label").before(newElement);
You can use a hidden input (Zend_Form_Element_Hidden) then simply replace the hidden element.
$("#target-element").html(data);
Don't forget to use same id (target-element) on html content of data.
This way you can also add backend validators to this hidden element to use isValid method.
You must remove previous inserted select before insert another on first select's value is changed again.
So it may be help in your case.
$("#city-label").prev('.ui-select').remove();
$("#city-label").prev('#satellite-label').remove();
$("#city-label").before(data);
or simply add this
$("#city-label").prev().remove();
$("#city-label").prev().remove();
$("#city-label").before(data);
It will remove select then label and insert new select before insert new one.