How to dynamically update select value? - javascript

Can anyone please help me how to accomplish following?
I have a dropdown field, which have flowers name.The default value is "Select your favorite flower". On tap or click, the dropdown opens and shows the list of options and when user selects a particular value, the field shows the selected flower name.
I need to append Favorite Flower: then the selected value. Can you guys please help me in how to accomplish this?
Please see the image:
All three states of dropdown
HTML Code
<select>
<list> Select your favorite flower</list>
<list>Rose</Rose> <list>Marigold </list>
<list>Lily</lily>
</select>

Use a change event, append a span with the text to the selected option:
$('select').on('change',function() {
$('option').find('span').remove();//remove previous selected span
var val = $(this).find(':selected').html();//get the text/html of the potion
$(this).find(':selected').html('<span>Favorite Flower: </span>'+val);//change the text with the option
});
https://jsfiddle.net/r5377h21/
or:
$('select').on('change',function() {
$('option').find('span').remove();
var selected = $(this).find(':selected'),
val = selected.html();
if(!selected.is('option:first')) {
$(this).find(':selected').html('<span>Favorite Flower: </span>'+val);
}
});
https://jsfiddle.net/r5377h21/1/

can you please try this.
let me know if you need any changes in it
Code :
<script>
function test(obj)
{
$("select option").each(function(){
$(this).text($(this).text().replace("favorite flower - ",""))
})
if($("option:selected",$(obj)).val() != -1){
$("option:selected",$(obj)).text("favorite flower - "+$("option:selected",$(obj)).text())
}
}
</script>
<select onchange="test(this)">
<option value="-1">Select your favorite flower</option>
<option>Rose</option>
<option>Marigold</option>
<option>Lily</option>
</select>

Related

JaveScript Select the dropdown list by the text of options

Is it possible to select the dropdown list by using the display-text of the options in the console(JavaScript)?
In my workplace, I need to fill a web form every day. But the options are too much to load, so I hope to use the Chrome console to select the option instead of using the mouse to click.
For now, I can use Value to select the option, but when I try to use the text, it fails.
The HTML sample and the JavaScript I used are as below. Could someone help?
Success - document.querySelector("#sel").value = 123
Fails - document.querySelector("#sel").text = "Product A"
<select>
<option value="123"> Product A </option>
<option value="243"> Product B </option>
<option value="212"> Product C </option>
<option value="466"> Product D </option>
</select>
Array.from(document.querySelectorAll('option')).find(el => el.textContent === 'Product A');
Truly sorry for the confusing example.
After trying lots of solutions, the final coding as below:
var txt = prompt();
for (i = 0; i < document.querySelector("#sel").options.length; i++) {
if(document.querySelector("#sel").options[i].text == txt){
document.querySelector("#sel").options[i].selected = true;
break;
}
}
With these codes, the User can select the specific options by entering the name of the product instead of clicking the dropdown list with the mouse and crash the browser.

Get Selected Option Text of SELECT using JQuery

I have dynamically created option where all values in option are coming from share point list .
Now I want to get the text of selected option . I tried few ways but I was not able to get
Code for getting data from list
$("#ddlIncrementType").append(
$("<option></option>")
.data("incrementLevel", results[increment].IncrementLevel)
.val(results[increment].Title)
.html(results[increment].Title)
);
Code where my option append
<div class="Increment">
<label for="sel1">Increment Type:</label>
<select disabled class="form-control" id="ddlIncrementType">
<option></option>
</select>
</div>
I want to get the text of Selected Option
Suppose in list there are three options
Item One
Item Two
Item Three
I want exactly text
Anyone who can help ?
I tried it but does't not worked !
var value = $("#ddlIncrementType").find(":selected").val();
var selectedText = $("#mySelect option:selected").html();
var value = $("#ddlIncrementType").find(":selected").text();
You can try this:
$("#ddlIncrementType option:selected").text();
You could use-
$(document).on('change', "#ddlIncrementType", function(){
var value = $(this).text();
alert(value);
});
Also you should not be using disabled for your <select>

How can I hide some elements from a select list?

I am new to programming and I would like to know how to hide some options from a select control I have...
I am going to explain the thing: So, i have two select controls.. according to the option from the select number 1, I want to hide some items from the second select, but I don't know how to do it, I was trying with some jQuery .hide but it is not working... Hope you can help me...
Thank you
Hope this gives you an idea, since you didn't post any code.
HTML
<select id="selectA">
<option value="">Select Fruit or Veg</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<select id="selectB">
<option value="">All</option>
<option value="apple" data-type="fruit">apple</option>
<option value="orange" data-type="fruit">orange</option>
<option value="carrot" data-type="vegetable">carrot</option>
<option value="tomato" data-type="vegetable">tomato</option>
</select>
JS
var selectA = document.querySelector('#selectA')
var selectB = document.querySelector('#selectB')
selectA.addEventListener('change', event => {
var type = event.target.value;
[].slice.call(selectB.querySelectorAll('option'))
.forEach(el => {
el.style.display = (el.dataset.type === type ? 'block' : 'none')
})
})
JSFiddle Demo: https://jsfiddle.net/hw76aLqv/1/
Try this.
if($("#APU").val("1")) {
$("#celda option[value = 'raven']").wrap('<span>')
}
To show again, just find that option(not span) and
$("#celda option[value = 'raven']").unwrap()
I hope this helps . Although the jQuery function is pretty lengthy but This way you will be able to get what is actually happening . After selecting an option from first select element , do a check whether id is 'selectA' or not .
Take the selected option as an object in the variable OPTIONS.
and then go to the next select Element using .next() function .
There use a loop which will go through all the child elements of select element .
after that I am doing a check . If the data-type of the child element is not equal to options.val() hide the child element using .hide()
Here is the code
$(document).ready(function(){
$('select').on('change',function(){
if($(this).attr('id')=='selectFirst'){
var options = $(this).find('option:selected');
var nextSelect = $('select').next();
nextSelect.children().each(function(){
child = $(this);
if(child.attr('data-type') != options.val()){
child.hide();
}
});
}
});

get value of dropdown not just ID

I am trying to populate a textfield with the value of whatever is in my dropdown box. Now all I get right now is the ID for the selected item, first in the list is 1, etc.
I know its got to be something stupid that I am missing but I can't see it at the moment.
How do I get the value of the selected item, instead of the ID?
Here is what I have so far, #id_maturity_letter is the dropdown and #message_text is the textarea I am trying to populate.
$("#id_maturity_letter").change(function() {
var id = $(this).val();
$('#message_text').val($('#id_maturity_letter').val());
$.getJSON('', {id:id}, function(json) {
});
});
Your code is correct, be sure that your html is created as you wish:
<select id='id_maturity_letter'>
<option id='1' value='1'>one</option>
<option id='2' value='2'>two</option>
<option id='3' value='3'>three</option>
</select>
will of course return a value that is equal to the id
So if you need the text:
$("#message_text").val( $("option:selected", this).text() );
If I understand your question correctly, you want the text of the selected option instead of its value. If that's actually the case, you can match the selected <option> element with the :selected selector, then call text() on the resulting object:
$("#id_maturity_letter").change(function() {
var id = $(this).val();
$("#message_text").val($("option:selected", this).text());
});

Jquery add values from dropdown to text input

I'm having trouble trying to accomplishing this.. Whatever option I select from a dropdown list named programs_dropdown I want to add to a text field named programs_input and separate the options values by a comma.
e.g. php, jquery, html
Below the dropdown list I have an add div. On click, it should add what I selected from the dropdown to the text field.
$(document).ready(function(){
$('#add').click(function() {
var programs = $("#programs_dropdown").val(); //get value of selected option
$('#programs_input').val(programs.join(',')); //add to text input
});
});
HTML
<select name="programs_dropdown" id="programs_dropdown">
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html" selected="selected">HTML</option>
</select>
<div id=add">Add</div>
<input type="text" name="programs_input" id="programs_input" />
I'm getting skill.join is not a function
The select has to multi option if you want to select multiple. Change it to
<select name="programs_dropdown" id="programs_dropdown" multiple>
Then it would start working.
Demo
EDIT:
$(document).ready(function(){
$('#add').click(function() {
var program = $("#programs_dropdown").val(); //get value of selected option
var programs = $('#programs_input').val().split(",");
if (programs[0] == "") {
programs.pop()
}
if ($.inArray(program, programs) == -1) {
programs.push(program);
}
$('#programs_input').val(programs.join(',')); //add to text input
});
});
DEMO
I think this is what you require Demo

Categories

Resources