Changing only the directory in an image source using jquery [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a select menu with four color options, and three images for each option. I want to make the image directory change for all three images when the user selects a different option in the select menu.
<img src="images/black/img1.jpg" />
<img src="images/black/img2.jpg" />
<img src="images/black/img3.jpg" />
<select>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>
I'm assuming there is a way to use wildcards in Jquery, but apparently I'm not proficient enough to figure it out.

Try this - note I gave imgs a class and the select an ID
$(function() { // when page has loaded
$("#color").on("change",function() { // assign the event handler
var col=$(this).val(); // value of select
$(".img").each(function() { // I gave the imgs a class to do this
var srcParts = this.src.split("/"); // split the src on /
this.src="images/"+col+"/"+srcParts.pop(); // take the image name
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="img" src="images/black/img1.jpg" />
<img class="img" src="images/black/img2.jpg" />
<img class="img" src="images/black/img3.jpg" />
<select id="color">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>

Related

Get the ID of an option in select dropdown [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 months ago.
Improve this question
I have a select dropdown:
<select onChange={(e)=> console.log(e.target.id)} id="cars" name="carlist" form="carform" >
<option id="a" value="volvo">
Volvo
</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I would like to get the ID a when selecting 'volvo' from the dropdown, thus getting the ID of the option, how can I achieve this?
The reason why I'm trying to get an id is because this dropdown can have multiply options with the same name (they would be separated by a line)
Use the selectedIndex to get this.
var getId = document.querySelector('#cars');
console.log(getId.options[getId.selectedIndex].id);
You can have the pass the reference of 'this' and get it from there.
something like the below answer
How to get selected option ID with Javascript not JQuery

Write-in option with dropdown option [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
how to include write-in option after drop-down option in html or javascript. As an example in the coding below,
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
But the user's choice wasn't in the list given (e.g. Honda). so he/she can write their option in 'others' option.
Apologies for my english. Thanks in advance.
It seems you may want to use the <datalist> along with an <input>, which offers the functionality you're looking for; in the below example if the user types S then the option of Saab will show up which can be selected, or the user can continue to type to add a new option to the list:
<datalist id="carOptions">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</datalist>
<input type="text" name="automaker" list="carOptions" />
While this may not be precisely what you're hoping for it does offer the functionality you require without a dependence on JavaScript.
References:
* <datalist>.
* HTMLDataListElement.
You can easily do that with jquery.
$('#dropdownId').append($('<option>', {
value: -1,
text: 'None of them work for me..'
}));
And just handle the case when the value is -1

How can I make a dynamic select box? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've three select-box here. How can I make this.
<select class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select class="form-control input-lg">
<option value="10">desk</option>
<option value="20">pen</option>
<option value="30">pc</option>
</select>
<select class="form-control input-lg">
<option value="100"></option>
<option value="200"></option>
<option value="300"></option>
</select>
Fundamentally this is an event driven question.
You want to populate the secondary select based on the first. You can do this with a jquery change event.
http://api.jquery.com/change/
On change, you initiate a callback function that populates the second select box, from there the population of the third is just the same concept.
A high level explanation is as such:
<select id="select1" class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select id="select2" class="form-control input-lg">
</select>
<script>
$('#select1').change(function(){
alert("Something has changed");
// RUN SOME OTHER FUNCTION TO POPULATE THE SECOND SELECT BOX
// Grab the dom element of the second select
var select2 = $("#select2");
// iterate your data, here an array with an element, and populate the select element
$.each(['some data'], function() {
select2.append($("<option />").val("Something").text("Something else"));
});
})
</script>
Note: For this you will obviously have to include JQuery library in your code
This is also considerably inefficient, but the improvements would take too long to explain in such an open question.

Show textarea when choosing the option "Other.." [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a select item with in there a few options, and one of them is called "other..". What I want is that when a user clicks on "other.." a textarea will appear, I know this can be done with jQuery. Here is a short and simple version of my HTML:
<html>
<body>
<select>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
<option value="other">Other..</option>
</select>
<input type="text" id="other_text" />
</body>
</html>
Add the change event to your dropdown list, which will toggle the text field if the selected value is "other":
$('select').on('change', function() {
$('#other_text').toggle(this.value === 'other');
});

i want to use multi select with bootstrap also called chosen [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am sonal goyal . New in designing . I want to use multiple select also called 'chosen' in my html page. But enable to create code.
I am using:
1- bootstrap 3.0
2- jquery 1.10.3
In future backbone.js
I find this link chosen.but enable to find code.
can you pls help me.
Thanx
<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect();
});
</script>
Ref: http://davidstutz.github.io/bootstrap-multiselect/
The code is on github if this is what you're asking > https://github.com/alxlit/bootstrap-chosen Make sure and check "example.html"

Categories

Resources