<div class="r_row">
<div class="row field_currency">
<div class="f_row"><label class="" for="currency">Currency</label></div>
<div class="r_row">
<select id="currency" name="currency" class=" select">
<option value="ron" >USD</option>
<option value="eur" selected="selected">EUR</option>
</select>
<div class="error context" id="error_currency"></div>
<div class="hint context" id="hint_currency"></div>
<span class="checked"> </span>
<div class="fancy_select"><div class="first" value="USD">USD</div><div class=" last" value="eur">EUR</div>
<br clear="all">
</div></div>
<br style="clear:both">
</div>
</code></pre>
I want to use two divs <div>USD</div><div>EUR</div> , and with the help of jQuery , if i click on USD i want to change also the value of the Select box, and add a custom class to the USD div, if i clik on EUR , change the value of the select to EUR, remove the class from USD and add that class to EUR.
How can I do that ?
Thanks
Try this:
<script>
$(document).ready(function(){
$('.first').click(function(){
$('.first').addClass('className');
$('.last').removeClass('className');
$('option[value=ron]').prop("selected", true);
});
$('.last').click(function(){
$('.last').addClass('className');
$('.first').removeClass('className');
$('option[value=eur]').prop("selected", true);
});
});
</script>
Related
I neeed help to make this snipper show values 5.5 and 6.5 (option value is decimal number)
$(function() {
$('#percentage_select').change(function() {
$('.rates').hide();
$('#' + $(this).val()).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="percentage_select" name="percentage">
<option value="5">5%</option>
<option value="5.5">5,5%</option>
<option value="6">6%</option>
<option value="6.5">6,5%</option>
<option value="7">7%</option>
</Select>
<div id="5" class="rates"> First link </div>
<div id="5.5" class="rates" style="display:none"> Second link </div>
<div id="6" class="rates" style="display:none"> Thirdlink </div>
<div id="6.5" class="rates" style="display:none"> Forth link </div>
<div id="7" class="rates" style="display:none"> Fifth link </div>
I tried to make value as parse , but didn't succed.
Since "." is using by jquery for catching elemets by their classes, i believe it creates a problem on this situation. You need to escape with "\\". You can use this example but know that this is a dirty way. For example if you will use this code with class selector and not with id selector like you do here, i bet it will create another problem for you. You have to use a better id format.
$(function() {
$('#percentage_select').change(function(){
$('.rates').hide();
$('#' + $(this).val().replace(".","\\.")).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="percentage_select" name="percentage">
<option value="5">5%</option>
<option value="5.5">5,5%</option>
<option value="6">6%</option>
<option value="6.5">6,5%</option>
<option value="7">7%</option>
</Select>
<div id="5" class="rates"> First link </div>
<div id="5.5" class="rates" style="display:none"> Second link </div>
<div id="6" class="rates" style="display:none"> Thirdlink </div>
<div id="6.5" class="rates" style="display:none"> Forth link </div>
<div id="7" class="rates" style="display:none"> Fifth link </div>
I have two dropdown selections where when you click on the option with value "other", it generates a text area just below the dropdown form.
Both areas work fine but to do so I had to create separate parent wrappers for both and I don't want that because I will be dynamically adding more dropdowns and it will be hard to dynamically make more unique parent wrapper divs.
I want each dropdown to be different from each other with their own textboxes generated.
I have made the entire code available in this pen
Code for your reference
HTML
<section id="alterationForm1">
<div class="card">
<div class="imgCard">
<img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
<span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
</div>
<!--Dropdown List-->
<div class="form-group">
<label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
<select class="form-control alterationTypeSelect" name="alterationTypeSelect">
<option value="button">Button</option>
<option value="stitching">Stitching</option>
<option value="cloth">Cloth</option>
<option value="fabrics">Fabrics</option>
<option value="otherClick">Other</option>
</select>
</div>
<div class="hideMe textBoxDiv">
<div class="form-group">
<label for="exampleFormControlTextarea1">Additional alteration details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div><!--text box div-->
<div class="submitButton text-center">
Submit
</div><!--submitButton-->
</div><!--card-->
</section><!--alteration form-->
<div data-duplicate="demo" class="demoClass">
<div class="card">
<div class="imgCard">
<img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
<span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
</div>
<!--Dropdown List-->
<div class="form-group">
<label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
<select class="form-control alterationTypeSelect" name="alterationTypeSelect">
<option value="button">Button</option>
<option value="stitching">Stitching</option>
<option value="cloth">Cloth</option>
<option value="fabrics">Fabrics</option>
<option value="otherClick">Other</option>
</select>
</div>
<div class="hideMe textBoxDiv">
<div class="form-group">
<label for="exampleFormControlTextarea1">Additional alteration details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div><!--text box div-->
<div class="submitButton text-center">
Submit
</div><!--submitButton-->
</div><!--card-->
<div id="addOnButton" class="text-center">
<button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
</div>
</div><!--demo class-->
JS
//When clicked on option with "other" value
$('#alterationForm1 .alterationTypeSelect').on('change', function(){
var val = $(this).val();
if(val === 'otherClick') {
$('#alterationForm1 .textBoxDiv').removeClass('hideMe');
}
else{
$('#alterationForm1 .textBoxDiv').addClass('hideMe');
}
});
$('#alterationSection2 .alterationTypeSelect').on('change', function(){
var val = $(this).val();
if (val === 'otherClick') {
$('#alterationSection2 .textBoxDiv').removeClass('hideMe');
}
else{
$('#alterationSection2 .textBoxDiv').addClass('hideMe');
}
});
$('.demoClass .alterationTypeSelect').on('change',function(){
var val = $(this).val();
if (val === 'otherClick') {
$('.demoClass .textBoxDiv').removeClass('hideMe');
}
else{
$('.demoClass .textBoxDiv').addClass('hideMe');
}
});
//Dynamic Adding
$("#czContainer").czMore();
Thank you so much for the help. I am in a great need for this help. Please find the pen link to better understand the entire problem.
please follow the below pen as I have modified your code as we want elements to be dynamically triggered:
https://codepen.io/anon/pen/NYyvpy?editors=1011
//question mark tooltip
$('[data-toggle="tooltip"]').tooltip()
//When clicked on other button
$('body').on('change','.alterationTypeSelect', function(){
console.log(544);
var val = $(this).val();
if(val === 'otherClick') {
$(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
}
else{
$(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
}
});
//Dynamic Adding
$("#czContainer").czMore();
Also, follow this link if you want to understand how newly added elements work with events
Event binding on dynamically created elements?
Looking to add "ALL" to an option with the Value of "79" with Javascript or JQuery
<select id="locations">
<option value="79"></option>
</select>
End Result should be:
<select id="locations">
<option value="79">ALL</option>
</select>
Thanks for any help :)
EDIT:
Turns out I also need it done to an checkbox too.
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span></span>
</label>
</li>
Again the end result should be:
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span>ALL</span>
</label>
</li>
The value is still "79" however the code for the first option didnt work on it.
Thanks again for any help!
You can access the element using attribute selector and set the text using text() method as follows:
$('option[value="79"]').text("ALL");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="locations">
<option value="79"></option>
</select>
or without jQuery:
document.querySelector('option[value="79"]').textContent = "ALL";
You can use attribute-equals-selector:
$('option[value=79]').text('ALL');
I want to show/hide element in form with ng-change or whatever you suggest . here is my html:
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown" ng-change="changeState(0)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div class="row-container">
first One
<span class="sp-right">
<label>
1
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
<div class="row-container">
second One
<span class="sp-right">
<label>
2
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
for example i want to show first one when user click on option 1 .
Fiddle
No need for ng-change, just use ng-if (or ng-show) to inspect the model's state:
<div class="row-container" ng-if="myDropDown == 'one'">
<div class="row-container" ng-if="myDropDown == 'two'">
Fiddle (with correct closing tags so that it actually works).
I would use ng-switch. If you want to show a div if none is selected then you can use ng-switch-default. If you want to default one of the div's below, then remove ng-switch-when= and replace it ng-switch-default
<div ng-app ng-controller="Controller" ng-switch on="myDropDown">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div class="row-container" ng-switch-when="one">
first One
<span class="sp-right">
<label>
1
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
</div>
<div class="row-container" ng-switch-when="two">
second One
<span class="sp-right">
<label>
2
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
</div>
</div>
http://plnkr.co/edit/QNdMxmYjR5LhsNvsHPpJ?p=preview
After seeing my questions replied here and with success, the problems appeared when transposing to my script:
I have a dropdown that is being cloned which shows it's value on a side div. The problem is that when I clone it, the dropdown below don't work and the first updates all the remaining. Code:
Add
<div class="row">
<div class="products-row">
<div class="col-xs-12 nopadding">
<div class="col-xs-2">
<input type="text" id="number1" class="form-control" value="1" />
</div>
<!-- if i remove the div below and leave only the select, it works -->
<div class="col-xs-6" >
<select name="total-checkout" id="name" class="form-control product-name select" >
<option value="25" >A</option>
<option value="50" >B</option>
<option value="75" >C</option>
</select>
</div>
<div class="col-xs-2">
<div class="tags">25</div>
</div>
</div>
</div>
</div>
jQuery:
var count = 0;
$('#add-more').click(function(){
var id = $(".row:last").attr('id');
var appendDiv = $($(".products-row:last")[0].outerHTML);
appendDiv.attr('id', ++id).insertAfter(".products-row:last");
});
$('#name').change(function(event) {
$('.tags').html($('#name').val());
});
$(document).on('change', '.select', function() {
$(this).next(this).html($(this).val());
});
Working jsFiddle:
http://jsfiddle.net/QuadDamage/p843nc9j/
If I remove the <div class="col-xs-6"> from around the <select> the output will appear not formatted but correctly updating the div.
Thanks in advance.
It seems to me that you're targeting .col-xs-2 .tags if this is the case you need this code
$(this).parent().next().find('.tags').html($(this).val());