Develop Reference

Set tag using jQuery on change function

I have this html select tag:
<select name="title_'+ field +'" class="form-control form_select_tag">
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
Now, I want to get the value from this select tag and set the value to a variable called tag. for that I am using the below code:
var label = $(this).find('.form_input_label').val();
var name = $(this).find('.form_input_name').val();
if ( data_type === 'title' ) {
var placeholder = $(this).find('.form_input_placeholder').val();
var tag = 'h3';
$('.form_select_tag').change(function() {
tag = $(this).val();
});
html += '<' + tag + '>' + label + '</' + tag + '>';
}
now, in this line: html += '<' + tag + '>' + label + '</' + tag + '>'; variable tag value is not set :(
How can I do this?

you can call $('.form_select_tag').val(); directly instead $(this).val();
and next problem is
$('.form_select_tag').change(function() {...});
Is set command not get if you want to do that you need set var tag as global
var tag will not be re-declare every functions call
That is what you need right?
createResult();
$('.form_select_tag , .form_input_label').on('change input', function() {
createResult();
});
function createResult() {
var html = '<br>Result:<br>'; //your code here
var data_type = 'title'; //your code here
var label = $('.form_input_label').val();
var name = $('.form_input_name').val();
if (data_type === 'title') {
var placeholder = $('.form_input_placeholder').val();
var tag = 'h3'
tag = $('.form_select_tag').val();
html += '<' + tag + '>' + label + '</' + tag + '>';
}
$('.label').html(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="title_'+ field +'" class="form-control form_select_tag">
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
<input type="text" class="form_input_label" value="label">
<label class="label">Male</label>

AngularJS and Edmunds Media API to pull vehicle images

Situation: Using a Rails app, and $http.get in AngularJS to PULL the photos from Edmunds.com MEDIA API.
TASK TRYING TO COMPLETE: ng-repeat through the vehicle photos.
CONDITIONS: I am getting the response successfully and able to load one image, but how can I have it repeat through the photos array and do all the images.
Apologies for unclear explanation, and any help appreciated.
index.html:
<h1> Wheel Tire Family </h1>
<!-- CAR IMAGES -->
<div ng-init="carImages">
<img src="https://media.ed.edmunds-media.com/{{carImages}}">
</div>
catalog_controller.js:
$scope.photos = {};
$scope.carImages = {};
//GET the edmunds media api for the
//Make Model Year photos
$http.get("https://api.edmunds.com/api/media/v2/audi/a3/2015/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key=api_key&fmt=json")
.success(function (data) {
var photos = data;
console.log(photos);
$scope.carImages = photos.photos[0].sources[0].link.href;
console.log($scope.carImages);
});

Maybe something like this?
angular
.success(function (data) {
$scope.carImages = data.photos;
});
html
<div ng-repeat="carImage in carImages">
<img ng-src="https://media.ed.edmunds-media.com/{{carImage.sources[0].link.href}}">
</div>
This should loop through the images and pick the first "source" link. It is also recommended that you use ng-src instead of src.

I have some helpful code for you in Jquery, may be this could help in working out with angular js.
To get all Vehicle Details (New, Used, Future) using Jquery , Use the below code.
<!--Form Details to display year/make/model in dropdown -->
<form method="POST" action="one123.php">
<select id="ajYears" name="ajYears">
</select>
<select id="ajMakes" name="makes" disabled="disabled">
<option>Select Make</option>
</select>
<select id="ajModels" name="models" disabled="disabled">
<option>Select Model</option>
</select>
<select id="ajStyles" name="styles" disabled="disabled">
<option>Select Trim</option>
</select>
<input type="submit" value="submit">
</form>
<!--Script to fetch details from API-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery.noConflict();
</script>
<!-- js code -->
<script>
var protoCall = "https://";
var host = "api.edmunds.com";
// Make sure to change the API KEY
var apiKey = "API KEY";
var fmt = "json";
var standardParams = "&fmt=" + fmt + "&api_key=" + apiKey + "&callback=?";
var $yearSelect = jQuery('#ajYears');
var $makeSelect = jQuery('#ajMakes');
var $modelSelect = jQuery('#ajModels');
var $styleSelect = jQuery('#ajStyles');
// lets bind some events on document.ready.
jQuery(function(){
$yearSelect.on('change', function() { getMakeModelsByYear()});
$makeSelect.on('change', function() { enableModelDropdown() });
$modelSelect.on('change', function() { getStyles() });
// lets build the year drop down.
ajEdmundsBuildYear();
});
// method to build the year drop down.
function ajEdmundsBuildYear()
{
var baseYear = 1990,
endYear = new Date().getFullYear();
$yearSelect.empty();
$yearSelect.append('<option value="-1">Select Year</option>');
for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
{
$yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');
}
}
// get the makes and models for a year in one go...
function getMakeModelsByYear()
{
var year = $yearSelect.val(),
endPoint = "/api/vehicle/v2/makes",
view = "basic",
options = "year=" + year + "&view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
// clear the make drop down... re add the first option... remove dsiabled attr.
$makeSelect.empty();
$makeSelect.append('<option value="-1">Select Make</option>');
$makeSelect.removeAttr('disabled');
$modelSelect.empty();
$modelSelect.append('<option value="-1">Select Model</option>');
// loop the makes... each make contains model... add the make in make drop down and models in model dd
jQuery.each(data.makes, function(i, val) {
make = data.makes[i];
$makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
jQuery.each(make.models, function(x, val){
model = make.models[x];
$modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');
});
});
});
}
// since we already grabed the models...
// now just matter of showing only the matching models for a make.
function enableModelDropdown()
{
var make = $makeSelect.val();
$modelSelect.removeAttr('disabled');
$modelSelect.find('option').not('[value="-1"]').hide();
$modelSelect.find('option[make=' + make + ']').show();
}
// grab the styles... pretty much same as
// getMakeModelsByYear()
function getStyles()
{
var year = $yearSelect.val(),
make = $makeSelect.val(),
model = $modelSelect.val(),
endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
view = "basic",
options = "view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
$styleSelect.empty();
$styleSelect.removeAttr('disabled');
$styleSelect.append('<option value="-1">Select Style</option>');
jQuery.each(data.styles, function(i, val) {
style = data.styles[i];
$styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
});
});
}

Get selected value of option with multiple dropdown menus using javascript

I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.
.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?
I have tried var e = document.getElementsByClassName("testClass"); which did not work.
I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.
http://jsfiddle.net/8awqLek4/4/
HTML Code
<ul>
<li>
<div class="ftrsTitle">BODY</div>
<select class="testClass" id="testId">
<option>Select</option>
<option ftr="bod" value="blk">Black</option>
<option ftr="bod" value="grn">Kelly Green</option>
<option ftr="bod" value="red">Red</option>
<option ftr="bod" value="roy">Royal</option>
</select>
</li>
<li>
<div class="ftrsTitle">TRIM</div>
<select class="testClass">
<option>Select</option>
<option ftr="trm" value="blk">Black</option>
<option ftr="trm" value="grn">Kelly Green</option>
<option ftr="trm" value="red">Red</option>
<option ftr="trm" value="roy">Royal</option>
</select>
</li>
</ul>
<div id="vars"></div>
Javascript Code
$(document).ready(function () {
$("select").on('change', function () {
var e = document.getElementById("testId");
var optionsText = e.options[e.selectedIndex].text;
var optionsValue = e.options[e.selectedIndex].value;
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
});

To read select value you can simply use $(this).val(). To get selected option label you should use text() method.
Fixed code looks like this:
$("select").on('change', function () {
var optionsText = $('option:selected', this).text();
var optionsValue = $(this).val();
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
Demo: http://jsfiddle.net/8awqLek4/3/

This should do it:
$(document).ready(function(){
$("select").on('change', function(){
var e = $(this).find("option:selected");
$("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
});
});
use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.
http://jsfiddle.net/8awqLek4/5/

Appending a div (multiple times) in Jquery without cloning

I am still trying to work this out. Currently this is the way it looks, It works on JSFiddle but on my for it only clones once and the clone has data in it that when changed, changes the 1st item
I am trying to streamline my very large form to speed up the processes. I have a section that repeats multiple time that I want to reduce to having coded once with a button to add more if needed. The section cannot be cloned as each is separate and specific. Also note that they each need a unique identifier. As I have it not they ar "transectA", "transectB", etc. Below is a small snippet to give you an idea wof what I am working with. Each select actually has 12 options and there are 14 transects.
<div class="transect">
<select name="transectA" id="transectA">
<option value="">Transect A </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
<option value = "RIGHT/HOOP">RIGHT/HOOP</option>
<option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
<option value = "RIGHT/NONE">RIGHT/NONE</option>
<option value = "CENTER/SED-CORE">CENTER/CORE</option>
<option value = "CENTER/HOOP">CENTER/HOOP</option>
<option value = "CENTER/CHLPHL-1">CENTER/TEMPLATE</option>
<option value = "CENTER/NONE">CENTER/NONE</option>
<option value = "LEFT/SED-CORE">LEFT/CORE</option>
<option value = "LEFT/HOOP">LEFT/HOOP</option>
<option value = "LEFT/CHLPHL-1">LEFT/TEMPLATE</option>
<option value = "LEFT/NONE">LEFT/NONE</option>
</select> </div>
I have attempted a couple of solutions (hide/show) & clone but neither give me a satisfactory result. All of the attempts I have tried with append seem to produce basically what the show/hide does.
<script>
$(document).ready(function() {
var $transect = $('.transect');
$transect.on('change', 'select', function() {
var $this = $(this),
$parent = $this.parent(),
$transects = $('.transect');
if($transects.length < 14 && !$parent.next('.transect').length) {
var ltr = String.fromCharCode(65 + $transects.length),
label = 'transect' + ltr;
$transect
.clone(true)
.find('select')
.attr('name', 'transect' + ltr)
.attr('id', 'transect' + ltr)
.find('option:eq(0)')
.text('Transect ' + ltr.toUpperCase())
.end()
.end()
.insertAfter($parent);
}
});
})
</script>
As always, your help will be greatly appreciated
Can anyone advise me why all of these solutions work in JSFiddle but not on my form. Even the script above works on the fiddle but only clones once on the form

you could do something like this:
var counter = 0
$('.add-new-button').click(function(){
$('#transectA').append('<option id="input ' + counter +'" value = "RIGHT/SED-CORE">RIGHT/CORE</option>');
counter++;
});
This will add a new option to #transectA. You can use this method to add form fields elsewhere as well. You can use the counter to make sure it has a unique ID or name or whatever. Good luck

You should be able to combine clone and some DOM manipulation to get the desired affect: http://jsfiddle.net/fjJfk/2/
But you'll likely need to make this example match your own markup/situation.
var $transect = $('._25');
$transect.on('change', 'select', function() {
var $this = $(this),
$parent = $this.parent(),
$transects = $('._25');
if($transects.length < 14 && !$parent.next('._25').length) {
var ltr = String.fromCharCode(65 + $transects.length);
$transect
.clone(true)
.find('select')
.attr('name', 'transect' + ltr)
.attr('id', 'transect' + ltr)
.find('option:eq(0)')
.text('Transect ' + ltr)
.end()
.end()
.insertAfter($parent);
}
});

You can use following;
HTML:
<div id="tempSelect" style="display:none">
<select name="transect" data-mini="true" id="transect">
<option value="">Transect_ </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
<option value = "RIGHT/HOOP">RIGHT/HOOP</option>
<option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
<option value = "RIGHT/NONE">RIGHT/NONE</option>
</select>
</div
<fieldset>
<div class="_100">
</div>
</fieldset>
<input type="button" name="newSelect" id="newSelect" value="New"/>
JS:
$("#newSelect").on("click", function() {
var lastSelect = $("._100 select").last().attr("name");
if (lastSelect != undefined) {
var temp = lastSelect.split("_");
var id = parseInt(temp[1]) + 1;
} else {
var id = 0;
}
$("#tempSelect select").attr("name", "transect_" + id);
$("#tempSelect select").attr("id", "transect_" + id);
$("#tempSelect select option:first").text("Transect_" + id);
$("._100").append($("#tempSelect").html());
});
Here is working demo: jsfiddle

Item selected to send to a JQuery function

I'm beginning in JQuery, and I'd like to know if there is a way to send a selected item from a selectlist to a JQuery function.
So, here is the fiddle I've used :
http://jsfiddle.net/YCPM7/7/
I'd like to know if there is a way to replace the 'option:select' that I've set inside the call of the function.
Here is a part of the code that's on the fiddle :
<select id="StateSelection1" name="StateSelection">
<option value="1">state 1</option>
<option value="2">state 2</option>
<option value="3">state 3</option>
<option value="4">state 4</option>
<option value="5">state 5</option>
</select>
</td><td>
<input type="button" value="envoi" class="bouton" name="test" onclick="switchDiv(1, 'option:select')"/>
the '1' that you can see inside "switchDiv(1, 'option:select')" is not really important. That's an id that will be generated by razor (vb.net).

Easy do. First of all, put an ID to the button. Let's call it btnTest.
And now, to the jQuery part, use this :
$("#btnTest").click( function() {
alert($("#StateSelection1 option:selected").text());
});
This will get the Text of the select, to get the index use val() instead of text()

I've tried not to edit the HTML you've shown in your jsfiddle too much, only adding the .js-target, .js-1 and .js-2 classes to help explain what's being done.
The below bit of jQuery should hide all of the divs to begin with, and then when clicking on one of the buttons, hide them all again and just display the div whose option was selected.
$(".js-target").hide();
$(".bouton").on("click", function() {
$this = $(this);
if ($this.hasClass("js-1")) {
number = "1";
} else if ($this.hasClass("js-2")) {
number = "2";
}
target = $('#StateSelection' + number + ' option:selected').val();
$(".js-target").hide();
$("#" + number + "/" + target).show();
});​
The fiddle can be viewed here.

once u get the value to select u can use
$("#btnTest").click( function() {
$("#StateSelection1").val(YOUR_VALUE);
}

Finally I choose to do this with a onClick method, which seemed to be a lot easier :
<script type="text/javascript">
function switchDiv(idCont) {
value = $('#DivSelection' + idCont + ' option:selected').val();
alert("contactid = " + idCont + " DivSelected = " + value);
$("#" + idCont + "1").hide();
$("#" + idCont + "2").hide();
$("#" + idCont + "3").hide();
$("#" + idCont + "4").hide();
$("#" + idCont + "5").hide();
$("#" + idCont + "6").hide();
$("#" + idCont + "7").hide();
$("#" + idCont + "8").hide();
$("#" + idCont + "9").hide();
$("#" + idCont + value).show();
};
</script>
<input id=#item.idContact type="button" value="Envoyer" class="bouton" onclick="switchDiv(#item.idContact)" />