Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.
So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:
<div>
<form action="setColor" method="post">
<fieldset>
<label for="color">Select A Color</label>
<select name="color" id="color">
<option>Blue</option>
<option selected="selected">Red</option>
<option>Yellow</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function() {
$('select[name="color"]').change(function() {
$('input[name="ancestorId"]').val("9999");
});
});
</script>
What I need now is something that sets the value according to the menu selection, matched up something like this:
Blue = 9999
Red = 8888
Yellow = 7777
I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.
You should put the value assignment in the option elements, as they were designed for just that:
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.
See it in action:
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
<input id="ancestor" type="text" />
Related
I'm trying to get two bootstrap-select forms that use the same JS, but don't affect each other (when one is clicked, the other doesn't change). It should be two lists of names of colours, with them appearing in the colours described in all instances (in the list, the first entry seen before clicked, and the entry seen after one is clicked). I have a JSFiddle example which is some of the way there. I want to keep the hover behaviour I have in my example, where the text colour is retained when the mouse hovers over and the background becomes only slightly greyer, unlike the default behaviour where the text goes white and the background goes blue. I realise both of my forms have the same ID of "select" and need to be different, but looking at the top form the way it is now can at least demonstrate the kind of behaviour that I want for both.
As a JSFiddle
HTML
<div class="selectContainer">
<select class="form-control pickerSelectClass" id="select">
<option value="red" style="color:red">Red</option>
<option value="blue" style="color:blue">Blue</option>
</select>
</div>
<div class="selectContainer">
<select class="form-control pickerSelectClass" id="select">
<option value="red" style="color:red">Red</option>
<option value="blue" style="color:blue">Blue</option>
</select>
</div>
JS
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$("#select").selectpicker("refresh");
$('.filter-option').css("color",$('#select').val());
$('#select').on('change', function(){
$('.filter-option').css('color', $(this).val());
});
});
This works. Also make sure that the ids are unique.
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$('select').each(function(index, item){
$(this).parent().find('.filter-option').css("color",$(this).val());
}).on('change', function(){
$(this).parent().find('.filter-option').css("color",$(this).val());
});
});
I have the following code on another webpage on my site with a form (say on page index.html): JSFiddle
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm()">
i.e a dropdown form.
I want to have a link on another webpage that will go to this page, and have the "Sales" option already selected.
<option value="1">
Sales
</option>
from the drop down menu (instead of the current default option), how do I create this?
Query parameters can be used to achieve the result you want, but you will need to parse the query parameter manually on your current page, since there is no standard JavaScript method for doing it.
You can write the following code on your page to automatically select the option:
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#dropdown").val(option);
});
Now you can create an anchor with the URL of this page, e.g. http://yourpage.url?type=1, which will redirect to this page, and will automatically change the value of your dropdown accordingly.
You must add some kind of router functionality with Javascript in your site.
I think the simplest thing you could do it to have a script in that page that checks the url if it has say a #bar hash like so: http://yoursite.com/foo.html#bar.
<script>
// make sure you run this on DOM ready like in $.ready() in jQuery or in a script just before closing the body tag
if(window.location.hash === 'bar') {
// add the selected attribute to the <option> you want
}
</script>
Try with append() function of jquery .and pass this with in onchange function call .And also added with document.ready for create the link on document load with selected value
function showForm(that){
var s = $(that).children('option:selected').text()
$('#link_box').append(''+s+'</br>')
}
$(document).ready(function(){ // for window load
showForm($('select'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
<label class="control-label" for="dropdown">
What can we help you with?
</label>
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm(this)">
<option value="0" disabled>
Select an option
</option>
<option value="1" selected>
Sales
</option>
<option value="2">
Complaints
</option>
<option value="3">
Queries
</option>
<option value="4">
Ideas
</option>
</select>
</div>
<div id="link_box">
<!-- its a link append box-->
</div>
We want to display Dropdown items when click on dropdown. And need to set text of selected item in Textbox, We done with it using onchange event.
But we do not want to display selected text of dropdown in dropdown;s textbox itself.
We are using dropdown reverse triangle option in front of Textbox to perform necessary logic.
Is it possible to hide dropdown selected text?
Since you havent shared any code assuming few thing I have created a fiddle.. kindly check http://jsfiddle.net/TmJCE/848/
all you need to do is after selecting an item from dropdown reset the dropdown
HTML
<select id="name" >
<option value="">select all</option>
<option value="Text 1">Text 1</option>
<option value="Text 2">Text 2</option>
<option value="Text 3">Text 3</option>
</select>
<input type="text" class="txt">
jQuery
$(document).ready(function(){
$('#name').change(function(){
var x=$('#name').val();
console.log(x);
$('.txt').val(x);
$('#name').prop('selectedIndex',0);
});
});
I'm trying to create a "How did you find us form element" and I'm having some jQuery trouble. The user selects from a list of options, one of which is "other". When selected other a text box that allows them to be more specific. In an effort to make this more user friendly that input is hidden when another option is displayed. I've got the jQuery working to show and hide the text input as the user changes the option but I would like it to clear any text in the text box in the event the user selects other, fills something in, then selects another option.
<label for="pcFindUs">How did you hear about us?</label>
<select name="pcFindUs" id="pcFindUs" onChange="getval();">
<option value="No Answer">Select One</option>
<option value="Internet Search">Internet search</option>
<option value="Internet Advertisement">Internet ad</option>
<option value="Soclail Media">Social media </option>
<option value="Unknown">I don't remember</option>
<option value="other">Other</option>
</select><br/>
<div id="pcHiddenOtherSpecify" style="display:none;">
<label for="pcFindUsSpecify">(Please Specify): </label><input type="text" value="" id="pcFindUsSpecify" name="pcFindUsSpecify" maxlength="50">
</div>
<script>
function getval(){
var values = $('#pcFindUs :selected').val();
if (values == "other"){
$("#pcHiddenOtherSpecify").css("display","block");
}else{
$("#pcHiddenOtherSpecify").attr("value","");
$("#pcHiddenOtherSpecify").css("display","none");
}
}
</script>
The pcHiddenOtherSpecify div containing the additional input appears and disappears just fine, but the value of #pcHiddenOtherSpecify still has whatever the user entered.
I've also tried
$("#pcHiddenOtherSpecify").val("");
With no luck. Any ideas what I may be doing wrong here?
You are trying to change the value of a div element, not an input. Try this:
$("#pcFindUsSpecify").val("");
Wrong ID
$("#pcFindUsSpecify").val("");
try
$("#pcFindUsSpecify").val("");
check it out
http://codepen.io/JcBurleson/pen/MKBBWq
I make use of Mobiscroll jQuery script for a prettier input by the users. On page load, the first option of the select list is shown as selected. What should I add to the existing code that on page entrance, the (for example) 3rd value is shown as the default?
I tried selecte="selected" but it does not work.
this is the jQuery script
$(function(){
$('#city').scroller({
preset: 'select',
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
});
});
and here is the options of the select box
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>
You can easily set the value from jQuery by doing this:
var defaultValue = 3;
$("#city").val(defaultValue);
"3" here represents Boston from your drop down list, here's a fiddle for proof:
http://jsfiddle.net/6mj8n/5/
Using $('#city').val('3'); will put The third option 'Boston' as selected for example
In this case, I think the vanilla DOM method is what I'd go with:
$('#city')[0].options.selectedIndex = 3;
It should be mentioned that this and other solutions should be placed before you initialize mobiscroll. Working demo with mobiscroll: http://jsfiddle.net/DCaHK/1/
...On further thought, your first suggestion of adding selected to the option should have worked. Updated my demo to do exactly that. Autocomplete could prevent this from working properly in some browsers, so it's possible your issue is simply that you need to turn autocomplete off:
<form autocomplete="off">
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2" selected>Berlin</option>
<option value="3">Boston</option>
</select>
</form>