I have a select box that contains certain elements (see below):
<select id="test" name="test">
<option value="12345">12345 - Test</option>
<option value="67890">67890 - Test 2</option>
<option value="53453">53453 - Test 3</option>
</select>
Here is what I'm trying to accomplish When the user selects a certain element, I want certain elements of the text to hide. For example, if I select 12345, I want the - Test to hide.
How can I do it in jQuery?
Thank you,
Kevin
A brute force-y way to do it would be to keep track of the internal text and values of the currently-selected option, then replace the text with the desired text when the option changes. This part's easy in your case, since the desired output text is the same as the option's value.
I opted to add a blank option at the beginning, since by default the text will not have changed, but you can get around this by adding a trigger to go off when the page is finished loading.
var selectedTextOrig = "";
var selectedValue = 0;
$("#test").change(function() {
// Reset the inner html text for the previously-selected option
$("#test option").each(function() {
if ($(this).val() == selectedValue) {
$(this).text(selectedTextOrig);
return false; // break out of $.each()
}
});
// Store the viewable text and value of the currently selected
selectedValue = $("#test option:selected").val();
selectedTextOrig = $("#test option:selected").text();
// Replace the current inner html
$("#test option:selected").text(selectedValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test" name="test">
<option disabled="disabled" selected></option>
<option value="12345">12345 - Test</option>
<option value="67890">67890 - Test 2</option>
<option value="53453">53453 - Test 3</option>
</select>
I have found a solution:
Here is how I achieved it:
$('select[name="test"]').find('option').remove().end();
$('select[name="test"]').append(new Option(selectId, selectId));
$('select[name="test"]').trigger('change');
Related
Is there possibility to get all html option from selected dropdown.
While i have
<select class="myselect">
<option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>
I would like to get whole option which is:
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
As far i as tried i can get all options in html by:
$('.myselect').html()
Or just one data by :
$('.myselect').find(':selected').data('one')
Or just one value
$('.myselect').find(':selected').val()
So is there simple way to get selected whole html option from < option >... to < /option>
Like this - it is not clear if you want the tag or the data attributes so here are either
$(".myselect").on("change",function() {
console.log(this.options[this.selectedIndex]); // complete tag
console.log(this.options[this.selectedIndex].dataset); // array of data attribute values
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myselect">
<option value="">Please select</option>
<option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>
I wasn't quite clear precisely what result you wanted, so here are a couple of ideas to get things you may be interested in:
1) To get the names and values of all the data-attributes you can just call .data() without any arguments and it will return all the data-attributes and their values in an object. There's also an example in the documentation.
2) To get the whole HTML of the selected item you can use outerHTML on the DOM element found by jQuery.
Demo of each below:
//to get the data-attributes
var selectedData = $('.myselect').find(':selected').data();
console.log(selectedData);
//to get the HTML of the selected item:
var selected = $('.myselect').find(':selected')[0].outerHTML;
console.log(selected);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myselect">
<option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>
I have created a dropdown box with 3 options on my website.
I want to change some text on the webpage, depending on the drop-down item selected. For example:
If dropdown option 1 is chosen, I would like some text on the page that says "You have chosen option 1".
I don't know any JavaScript and so I haven't tried anything apart from trying to search for a similar solution.
<select name="os0" style="background: #315d80; color: #fff; border-color: white; border: 0px;">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>
Full sultion with jQuery (I started typing it before you added the HTML to your question so the options are italian car brands).
https://jsfiddle.net/mL2c2xb6/
HTML:
<select id="carSelect">
<option></option>
<option value="Audi">Audi</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
</select>
<p id="choiceDisplay">
Selection Display
</p>
Javascript:
$('select').change(function(){ // Listen to changes to <select> element
const options = $("option"); // Get all the <option> elements.
let selectedOption = ""; // Var to store selected option value.
options.each(function(index){ // Iterate through option elements.
let option = options[index];
if($(option).prop("selected")) { // Find the seletced one.
selectedOption = $(option).val(); // Get the value and store it
};
});
$("#choiceDisplay")
.empty()
.append(selectedOption); // Display the result.
});
var e = document.querySelector('[name="os0"]');
var strUser = "";
e.addEventListener("change", function(){
strUser = e.options[e.selectedIndex].innerHTML;
alert("You have chosen " + strUser);
});
i have a drop-down that has values which are exceeding the current div's width. i want to show only a part of the text when that option is selected. i tried extending the width but the form structure is getting messed up.
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
how can i achieve this using jQuery ?
the expected output is that when the option $2.00/month(12 months) is selected it shows as $2.00/month in the drop-down.
The solution comes with the onchange and onmousedown event. Using jQuery's selectors we can get the selected option and change its display HTML.
//you really don't need jQuery, but we can wrap it in there.
//wrap in ready function to make sure page is loaded
$(document).ready(function() {
$("select#g-suite-pac-id").on("change", function() {
var text = $(this).children("option").filter(":selected").text()
var edited = text.match(/^.+?\/month/); //use regex | ^ start, .+? lazy search for everything until /month
//save
$(this).children("option").filter(":selected").data("save", text);
//change
$(this).children("option").filter(":selected").text(edited);
});
$("select#g-suite-pac-id").on("mousedown", function(e) {
//restore a saved value
var selected = $(this).children("option").filter(":selected");
if (selected.length > 0)
{
if (selected.data("save"))
{
selected.text(selected.data("save"));
selected.removeData("save");
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
Set width of select component to any fixed width like below:
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package" style="width:96px">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)dffsdfsdfdsfsdfdsfdsfsd</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
try above code, it shows text that can fit in 96px width.
I have a dropdown list with 2 options:
<select name="list" size="1">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
And i want to set <span id=tag></span> to display different text depending on which option is highlighted in the dropdown. How can I do this?
Well, the question is pretty vague but in general you would do something like this:
Html:
<select id="mySelect" name="list" size="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span id="tag"></span>
Javascript:
//cache the select and span elements
var mySelect = document.getElementById("mySelect"),
tag = document.getElementById("tag");
//when it changes
mySelect.onchange = function() {
//change the tag innerHTML checking the selected value of the select
tag.innerHTML = mySelect.value === "1" ? "some text" : "some other text";
}
You could change the ternary operator (? :) for a few if statements, if you need more conditions.
Notice that I've added an Id to the <select>. You can avoid the caching part if you want to get the span each time the select changes for some reason
You can do it with an onchange event handler on your <select>:
<select name="list" id="list">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
<span id="tag"></span>
<script>
// Get references to the objects you need (<select> and <span>)
var list = document.getElementById('list');
var tag = document.getElementById('tag');
// When the list value changes, set the innerHTML of the <span>
list.onchange = function() {
tag.innerHTML = this.value;
};
</script>
Notice in the above that I've added id attributes to both your select and span elements. This allows me to easily get a reference to them in Javascript.
It's also important for my example that the script is executed after the elements are rendered, otherwise the document.getElementById call won't return a reference to them. You could get around this limitation by moving the script into a window.onload handler.
Here's a simple example of it working.
I have a multi selection combo box and a checkbox in a form.
I'd like the checkbox to be enabled only when user selects a particular value from the multi selection combo box.
Is this possible to do ...either by javascript or jQuery. I am already using jquery elsewhere.
Example: http://jsbin.com/ipomu
to begin with checkbox will be disabled. it should only be enabled when user clicks on option 2
A sample one. You just add the option values for which you want to enable the checkbox to the array object. In the following sample I have enabled the checkbox on click of 2, 3,5 and 7 options.
<script type="text/javascript">
$(function(){
var arrVal = [ "2","3", "5", "7" ];
$("#combobox").change(function(){
var valToCheck = String($(this).val());
if ( jQuery.inArray(valToCheck,arrVal) == -1 )
{
$("#check").attr("disabled", "true");
}
else
{
$("#check").removeAttr ( "disabled" );
}
});
});
</script>
<select id="combobox" size="9" id="reasons" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
Working demo for your example.
I updated the jsbin link you provided with the proper jQuery needed to achieve the desired effect.
http://jsbin.com/ipomu/2
You can enable/disable an html element through javascript with:
document.getElementById('<the id of your checkbox here>').disabled = true;
So, you have to add OnChange event of your multi selection combo box and add logic in some function when to disable/enable your checkbox.
Example:
<select onChange="myfunc(this)">
...
<script>
function myfunc(sel)
{
if (sel.selectedValue == "2")
document.getElementById('<the id of your checkbox here>').disabled = true;
}
</script>
Most simply, with straight Javascript, and no jQuery, you could add the following onchange attribute to the select element (assuming that the elements are both surrounded by the same form):
onchange="this.form['mycheck'].disabled = (this.value != 2)"
If they are not in the same form, or if you don't know the name of the intended element, or the elements are dynamically created, the .disabled = (this.value != 2) will be the same, but the method of finding the right checkbox may be different.