first post here, I come in peace :) I've searched but can't quite find what I'm after.
I am trying to manipulate the selected option of a select box. Can someone please explain why this works:
$('#some_select_box').click(function() {
$('#some_select_box option:selected').remove();
});
but this doesn't:
$('#some_select_box').click(function() {
$('this option:selected').remove();
});
I just want to use "this" instead of spelling out the id of the select box - can someone point me in the right direction for the correct syntax? It's driving me mad because it looks like it should be really simple. And I'm sure it is to someone, but not me, cos its the end of the day and I'm brain-fried... Any pointers much appreciated.
Cheers
this isn't a css selector.
you can avoid spelling the id of this by passing it as a context:
$('option:selected', this).remove();
http://api.jquery.com/jQuery/
$('#some_select_box').click(function() {
$(this).find('option:selected').remove();
});
Using the find method.
This should do the trick:
$('#some_select_box').click(function() {
$('option:selected', this ).remove();
});
This is a simpler one
$('#some_select_box').find('option:selected').remove().end();
$('#some_select_box option:selected').remove();
The above option works in create form, but the most accurate method is to remove only the disabled value, why?
think about it, when you want to use it in the edit form you need to remove only the disabled selected option otherwise it will remove all selected options from the multi-select dropdown.
remove disbaled value from dropdown
$('#some_select_box').find('option:disabled').remove().end();
above will remove option like below
<select id="some_select_box" multiple>
<option disabled selected>Choose Option</option>
</select>
Related
I want to set the first position to select2 dropdown by default, I have tried this but It doens´t work:
$('#mylist').val($('#mylist option:first-child').val()).trigger('change');
Other way that I tried;
$('#mylist').val(1);
But the problem is I don´t know what value is, because it is depend from a query and It will not always be the same value.
I did not set the dropdown values from the HTML, but it is an input hidden and the values are loaded in a query
I hope that anyone can help me
Regards!
If you using Select2 4.x just trigger change.select2
$('#mylist').val(1).trigger('change.select2');
please try with this:
$('#yourSelect2').val($('#yourSelect2 option:eq(1)').val()).trigger('change');
the value from eq() depends of the position that you want to select
This works for me:
$('#mylist option:eq(0)').prop('selected',true);
Please do this
$('select#mylist').val(1).select2();
It's better to use attribute specifiers and set that element's selected prop to true like so:
$('option[value="op2"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>
</select>
Then change op2 to whatever the value attribute of the desired default option is.
this work for me :
$("#mylist").val($("#mylist option:first").val()).trigger('change');
juste remove -child
As you may know Select2 need data in particular format only [id="id_value",text="data_linked_to_id"]
Lets consider you want to select first item ,you should have its Id which is used by select2 to list all items.(let here first id be 1)
$('#selectElementId').val("1");
$('#selectElementId').trigger('change');
If want to set multiple items selected then pass array of ids.
ids=["1","3","4"]
$("#selectElementId").val(ids);
$("#selectElementId").trigger('change');
**OR**
$("#selectElementId").val(["1","3","4"]);
$("#selectElementId").trigger('change');
Step 1:
Select first option of your select(s) - works not only for select2
$('#myForm').find('select').find('option:eq(0)').attr('selected','selected');
Step 2:
Trigger select2 change
$('#myForm select').trigger('change.select2');
I am facing a very strange problem where the jQuery :selected is always returning the same value.
For the example, lets say I have this HTML:
<select class="some_select">
<option value="0">Zero</option>
<option value="1">One</option>
</select>
then I run this jQuery code on $(document).ready():
$('.some_select').change(function() {
alert($(this).attr('value'));
});
In the case above, the alert always display the good value of the selected option, but if I run this:
var type = $('.some_select :selected').attr('value');
with this code, the alert always return '0', no matter what option is selected.
I also tried with:
$('.some_select').find(':selected')
and
$('.some_select').filter(':selected')
also
$('.some_select option:selected')
Thanks In advance for any help!
I'm going to tldr Explosion Pills comment. The code you are looking for is
$('.some_select').change(function() {
console.log($(":selected").attr('value'));
});
The select element doesn't have a value attribute, so alerting $(this).attr('value') will alert undefined, not the "good value" of the selected option, as you claim.
You don't need to use the :selected pseudoclass here. Just use the .val() method of the select to retrieve its current value:
$('.some_select').change(function() {
alert($(this).val());
});
Here is a demonstration: http://jsfiddle.net/qGuxt/
That is because you need the .change(function(){..}) so it can update the value when it is changed, the other snippets of code you have do not get updated when the value is changed. Or am I misunderstanding something?
I have a select list of options. I want to instantly make another select list contain the same options.
$('#list1 option').appendTo('#list2');
The idea above is right, but for some reason it removes all the options from the original list which I dont want to do!
Can anyone help with this? Thanks
You're just missing a .clone():
$('#select1 option').clone().appendTo($('#select2').empty());
If #select2 is already empty, then you can simply .appendTo('#select2').
Using JQuery, you can manipulate lists easily...
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});
"If you click the “add” button, we remove the selected option from select1 and add that same option to select2" - Example from http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
i have a dropdownlist in my web-page how i can get the value from the selected option of them
like
<select id="selme">
<option id="a" value="1">I need it</option>
</select>
how i can get the value "I need it" whenver it will select.
i not talking about attribute "value" i need a value who fill inside option tags of dropdownlist
Try
$("#selme").change(function(){
$(this).find("option:selected").text();
});
See a working demo
http://groups.google.com/group/jquery-en/browse_thread/thread/2970457bc8ec7ec5?pli=1
All there for you
Here is a jsfiddle for you I just made http://jsfiddle.net/AqmZp/
Basically it actually is just $("#selme").val();
Check it Out-->
For getting text
$("#selme").change(function(){
$(this[this.selectedIndex]).text();
});
For getting value
$("#selme").change(function(){
$(this[this.selectedIndex]).val();
});
Try this..
$('#selme option:selected').text();
$('#selme option:selected').html()
This things works perfectly
<select name="selectbox" onchange="alert(this.value)">
But I want to select the text. I tried in this way
<select name="selectbox" onchange="alert(this.text)">
It shows undefined.
I found how to use DOM to get text. But I want to do this in this way, I means like using just this.value.
this.options[this.selectedIndex].innerHTML
should provide you with the "displayed" text of the selected item. this.value, like you said, merely provides the value of the value attribute.
In order to get the value of the selected item you can do the following:
this.options[this.selectedIndex].text
Here the different options of the select are accessed, and the SelectedIndex is used to choose the selected one, then its text is being accessed.
Read more about the select DOM here.
Please try this code:
$("#YourSelect>option:selected").html()
Just use
$('#SelectBoxId option:selected').text(); For Getting text as listed
$('#SelectBoxId').val(); For Getting selected Index value
I know no-one is asking for a jQuery solution here, but might be worth mentioning that with jQuery you can just ask for:$('#selectorid').val()
If you want to get the value, you can use this code for a select element with the id="selectBox"
let myValue = document.querySelector("#selectBox").value;
If you want to get the text, you can use this code
var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;
The question was not for the value but for the text.
Imagine you have something like :
<select name="select">
<option value="1">0.5</option
<option value="2">0.7</option
</select>
And you need to catch the text.
So for me I have tried with html (php), and
this.options[this.selectedIndex].text
(from Delan Azabani) doesn't work but
this.options[selectedIndex].text
work, like this on HTML
<select ... onChange="upTVA(this.options[selectedIndex].text);">
It is still surprising that for a select this.text does not work while this.value works