I am trying to get an image to pop up for each item in a drop down list to act as a visual aid and for data accuracy
The list code is:
<P style=font-size:0></P>Accident Code: <BR>
<form name="accident" action="">
<select id='List6' name='List6'>
<option selected>Make a selection</option>
</select>
<select id='List7' name='List7' onchange="getValue3(this.value, this.form['List6'].value,
this.form['List6'].value)">
<option selected ></option>
</select></P>
</form>
You have set the style attribute on your p tag in a wrong manner and put the </p> in a wrong place. I am not sure where to place </p> but you can change accordingly
Edited code:
<p style="font-size:0"></p>Accident Code: <BR>
<form name="accident" action="">
<select id='List6' name='List6'>
<option selected>Make a selection</option>
</select>
<select id='List7' name='List7' onchange="getValue3(this.value, this.form['List6'].value,
this.form['List6'].value)">
<option selected ></option>
</select>
</form>
And for adding images in your select tag add these to your CSS:
#List6 option[value=value1]{
background-image:url(img1.png);
}
#List6 option[value=value2]{
background-image:url(img2.png);
}
#List7 option[value=value1]{
background-image:url(img11.png);
}
/*And so on.. */
And you can also you use this. It is exactly what you need
Related
I have two dropdown menus. The first is to choose your location. The second is to choose what type of pictures you want to upload. (i.e. Option 1 - Akron, Option 2 - Skyline). I've setup a file request (DropBox generated upload link) in my DropBox account for these options (Akron, Skyline). If they choose (Akron, Houses), it'd be a different upload link. Similarly, (Cleveland, Streets) would be yet another upload link. Using JQuery, I have the link sent to my submit button HTML. Everything I've tried sends to that link no matter what options I choose. (i.e. everything goes to (Akron, Skyline) link even if I choose (Akron, Houses). There is something wrong in my if statement and I can't figure it out. Here is a sample of my code. The if statement is for the (Akron, Skyline) combination. Additional code will be written for other options once I get this one to work. I've replaced the upload link with a generic URL.
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p> Choose Your Location </p>
<select id="Location Select">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select id="Type Select">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
<script>
if("#Location Select").val("Akron") && ("#Type Select").val("Skyline"){
$("a").attr("href",'https://www.google.com');
}
</script>
</body>
</html>
Note
http://api.jquery.com/val/
.val() does not accept any arguments.
Also note that you first have to identify the selected element, and then get its value.
HTML IDs should not have spaces, and there should only be one ID of a particular string in any given document. If you want to describe a type of element, use class instead. For example:
<p> Choose Your Location </p>
<select class="Select" id="Location">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select class="Select" id="Type">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
<script>
$('input').click((e) => {
e.preventDefault();
const location = $('#Location')[0];
const type = $('#Type')[0];
const locationVal = location.options[location.selectedIndex].value;
const typeVal = type.options[type.selectedIndex].value;
if (locationVal === 'Akron' && typeVal === 'Skyline') {
console.log('Akron/Skyline');
} else {
console.log(`Other, ${locationVal} ${typeVal}`);
}
});
</script>
(you don't actually need the class="Select" here at all, based on the code so far)
This this code. It was missing $ as well as brackets.
if($("#Location Select").val("Akron") && $("#Type Select").val("Skyline")){
$("a").attr("href",'https://www.google.com');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p> Choose Your Location </p>
<select id="Location Select">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select id="Type Select">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
</body>
</html>
I have a site with multiple select tags that comes in pair.
So when I choose a team in select tag 1, i want all players from that team to appear in the closest select tag (2) Player. I have done all the player fetching and i have my result ready. But when I update the select tag using javascript i face a problem, either all player-tags update with the same value or none does.
SO! My problem is that I want to update only the next (.player) select tag and not every .player tag?
HERE IS A
DEMO
<div>
<i>1</i>
<select class="country">
<option selected="selected">Team</option>
<option value="England">England</option>
<option value="Italy">Italy</option>
</select>
</div>
<div>
<i>2</i>
<select class="player">
<option selected="selected">Player</option>
</select>
</div>
<div>
<i>1</i>
<select class="country">
<option selected="selected">Team</option>
<option value="England">England</option>
<option value="Italy">Italy</option>
</select>
</div>
<div>
<i>2</i>
<select class="player">
<option selected="selected">Player</option>
</select>
</div>
$(document).ready(function() {
$(".country").change(function() {
$(this).next(".player").html("<option value='test'>test</option>");
});
});
The issue is because .player is not a sibling of .country. You need to find the closest parent div, then go to the next div and find the .player in there. Try this:
$(".country").change(function() {
$(this).closest('div').next('div').find('.player').html("<option value='test'>test</option>");
});
Updated fiddle
I have a text input as follows:
<input class="input-large" form="form" type="text" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
Unfortunately I want the information entered into this field to be very specific. The best solution I can think for this, is to provide 3 drop down menus with a range of options.
I can edit the HTML and add JavaScript as necessary, but can't edit the form processing script or the database, so the value I need to get back from the 3 select menus needs to be concatenated into a single form field value.
What do you reckon?
I think I almost have it but it isn't working. I would copy the whole form but it is very long and hopefully this bit is the only bit needed
<form>
<input form="form" type="hidden" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
<script type="text/javascript">
$(all_three_select_tags).change(function(){
concatenated_string = $(#product_description_product_1).val() + $(#product_description_product_2).val() + $(#product_description_product_3).val();
$("#product_description_product").val(concatenated_string);
})
</script>
<select id="product_description_product_1">
<optgroup label="Box size">
<option value="Extra small">Extra small</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</optgroup>
</select>
<select id="product_description_product_2">
<optgroup label="Speciality">
<option value="organic">organic</option>
<option value="seasonal">seasonal</option>
<option value="locally grown">locally grown</option>
<option value="exotic">exotic</option>
<option value="gourmet">gourmet</option>
</optgroup>
</select>
<select id="product_description_product_3">
<optgroup label="Type of box">
<option value="veg box">veg box</option>
<option value="fruit box">fruit box</option>
<option value="fruit & veg box">fruit & veg box</option>
</optgroup>
</select>
</form>
I'm going to try to update this based on the code you provided. Your script tag contents should be this:
<script type='text/javascript'>
$("#product_description_product_1, #product_description_product_2, #product_description_product_3").change(function(){
concatenated_string = $("#product_description_product_1").val() + $("#product_description_product_2").val() + $("#product_description_product_3").val();
$("#product_description_product").val(concatenated_string);
})
</script>
Also your hidden field tag should look something like this (I'm assuming the top line, of the second block of code, was intended to be the hidden field):
<input type='hidden' value='' id="product_description_product">
Here is a jsfiddle with this an example as well http://jsfiddle.net/eNNZX/
Please keep in mind the div with id "temp_display" is not required, its only so you can see the value after each change.
This way anytime any of the selects are changed the hidden input is updated with the concatenated version of all 3. Then when you submit the page, just look at the parameter referencing the hidden input for your desired value.
Hope this helps!
EDIT: Ok, I really want to get this so I've decided to simplify what I need. I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.
<script type="text/javascript"><!--
function OnSelectionChanged(listBox) {
var textInput = document.getElementById("dn");
textInput.value = listBox.value;
}
//--></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Text</h1>
<div id="intro"><h5>Text</h5>
<div id="content"><h2>Text:</h2>
<p>Text</p>
</div>
<form method="POST" action="submit" name="myForm"><fieldset>
<legend>Text</legend>
<label>[?]
Disposition Code<br />
<select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
<option value="-1" selected>——Select one——</option>
<option value="Text ">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="195">195</option>
<option value="270">270</option>
<option value="300">300</option>
<option value="340">340</option>
<option value="350">350</option>
<option value="370">370</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
</select>
</label>
<label>[?]
Cause Code<br />
<select size="1" name="cause">
<option value="-1" selected>——Select one——</option>
<option value="">Cause - 190</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</label><br /><br />
<label><!--[?] -->
Disposition Narrative
<textarea id="dn" rows="8" cols="30" name="dn"></textarea>
</label>
Im still getting used to how stack overflow wants us to format the code but hopefully you guys can read it well enough to help find a solution. Thanks again.
All I can really give you at this point is
Attach onchange handlers to your drop downs. Your handlers will
add/replace the text.
Use regular expressions to replace text when dd2 and dd3 change.
If you can provide more details about the text you want to replace then someone will be able to help you with your regular expressions.
I'm updating the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected instead of switching to the newly selected option.) Suggestions?
Thanks. --Jeff
I have a simple form like this:
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p> Task A: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form></div>
and my jQuery code looks like this:
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var form = $(this).parents('form');
var assigned = form.find(':selected').first().val();
form.find(':selected').each(function(index){
$(this).val( assigned ).change();
});
}
);
});
</script>
I'm updating the selected option programmatically using jQuery
Not as far as I can see. You're re-setting the value of the selected option, but not doing anything as far as I can tell to the actual select box.
To change a select box, you need to identify it, then call val on it, not one of its option elements.
I can't make out what you want your input[name="button1"] to do, but here's an example of updating a select box: Live copy | source
HTML:
<select id="theSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">
JavaScript:
jQuery(function($) {
$("#theButton").click(function() {
$("#theSelect").val("2");
});
});
Separately, as j08691 pointed out in the comments, you can't assign the same id value ("assigner") to more than one element. id values must be unique in the document. Your code doesn't show you using that id, so this may well be unrelated, but it's worth flagging up.
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>
Task A: <select name="assignment[]" id="assigner2">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner3">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var assigned = $("#assigner").val();
$('#form1 select').val( assigned );
}
);
});
</script>