change classname dynamically when append div

change classname dynamically when append div - javascript

it's working fine for a single row. but when I am appending extra rows that time it shows all the hidden div and when I change the route to value all destination div are changing. but I need to change each row accordingly. here is my code sample.
//add div by onclick event from button
function add() {
var div = document.createElement("div");
div.innerHTML = `
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>`;
document.getElementById("appenhere").appendChild(div);
}
//hide div by css class
$(document).ready(function() {
$(".department").hide();
$(".employee").hide();
$(".area").hide();
});
//show div by onchange event
function change(select) {
// console.log(select.value);
var parent = $(select).siblings().siblings();
console.log(parent);
if (select.value == "department") {
$(".department").show();
$(".employee").hide();
$(".area").hide();
} else if (select.value == "employee") {
$(".department").hide();
$(".employee").show();
$(".area").hide();
} else if (select.value == "area") {
$(".department").hide();
$(".employee").hide();
$(".area").show();
}
}
<head>
<title>test page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pt-4">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>
<div id="appenhere"></div>
<button onclick="add()">Add more</button>
</div>
</body>

Get the containing row with $(select).closest(".row"). Then you can change just the elements in the same row.
Use CSS to initially hide the dependent menus, instead of calling .hide() in $(document).ready(), so it will apply to the elements that are added dynamically.
//add div by onclick event from button
function add() {
var div = document.createElement("div");
div.innerHTML = `
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>`;
document.getElementById("appenhere").appendChild(div);
}
//show div by onchange event
function change(select) {
// console.log(select.value);
var parent = $(select).closest(".row");
console.log(parent);
if (select.value == "department") {
parent.find(".department").show();
parent.find(".employee").hide();
parent.find(".area").hide();
} else if (select.value == "employee") {
parent.find(".department").hide();
parent.find(".employee").show();
parent.find(".area").hide();
} else if (select.value == "area") {
parent.find(".department").hide();
parent.find(".employee").hide();
parent.find(".area").show();
}
}
.department,
.employee,
.area {
display: none;
}
<head>
<title>test page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pt-4">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>DTMF</label>
<select class="form-control" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-md-4 route">
<div class="form-group">
<label>Route to</label>
<select class="form-control" onchange="change(this)" name="" id="">
<option value="">Select</option>
<option value="department">department</option>
<option value="employee">employee</option>
<option value="area">area</option>
</select>
</div>
</div>
<div class="col-md-4 department">
<div class="form-group">
<label>Destination</label>
<select class="form-control" name="" id="">
<option value="1">dep-1</option>
<option value="2">dep-2</option>
<option value="3">dep-3</option>
<option value="4">dep-4</option>
</select>
</div>
</div>
<div class="col-md-4 employee">
<div class="form-group">
<label>Employee</label>
<select class="form-control" name="" id="">
<option value="1">emp-1</option>
<option value="2">emp-2</option>
<option value="3">emp-3</option>
<option value="4">emp-4</option>
</select>
</div>
</div>
<div class="col-md-4 area">
<div class="form-group">
<label>Area</label>
<select class="form-control" name="" id="">
<option value="1">area-1</option>
<option value="2">area-2</option>
<option value="3">area-3</option>
<option value="4">area-4</option>
</select>
</div>
</div>
</div>
<div id="appenhere"></div>
<button onclick="add()">Add more</button>
</div>
</body>

Related

Parent <div> hides when I click it

I have a input-field, and when I click it a <div> will be shown.
But for some reason when I click on the <div>, it hides, and I can't seem to find the issue.
JSfiddle
$('#searchid').blur(function() {
if ($(this).val() != "") {
$("#drope_box").show();
} else {
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>

This is because you're hiding the <div> when you lose focus on the input and there is no value.
In your blur handler, if the input is empty (as when you first click it), it will hide the dropdown when the input loses focus.

check this I hope that this answered what you have asked for...
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").hide();
}
else{
$("#drope_box").show();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>

To get the selected index for multiple dropdowns of the same class

I have multiple dropdowns with the same class but different values. On change of a dropdown selected value, I need to know the index. Below is my following code:
$("body").on("change", ".ddlFruit", function () {
var fruitIndex = $(".ddlFruit option:selected").index();
alert(fruitIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Apple</option>
<option value="2">Bannana</option>
<option value="3">Mango</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Water Melon</option>
<option value="2">Kiwi</option>
<option value="3">Peach</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Strawberry</option>
<option value="2">Papaya</option>
<option value="3">Grapes</option>
</select>
</div>
</div>
The issue with this is it always gives the index of the first dropdown even if I change values in second or third dropdown. I tried something like
var fruitIndex = $("this option:selected").index();
but that does not work. How do I figure out the right index in Jquery without having to change anything in the html?

Use the this context as the second argument in the jQuery function.
var fruitIndex = $("option:selected", this).index();
$("body").on("change", ".ddlFruit", function () {
var fruitIndex = $("option:selected", this).index();
alert(fruitIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Apple</option>
<option value="2">Bannana</option>
<option value="3">Mango</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Water Melon</option>
<option value="2">Kiwi</option>
<option value="3">Peach</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Strawberry</option>
<option value="2">Papaya</option>
<option value="3">Grapes</option>
</select>
</div>
</div>
Or use find() method to get element within this context.
var fruitIndex = $(this).find("option:selected").index();
$("body").on("change", ".ddlFruit", function () {
var fruitIndex = $(this).find("option:selected").index();
alert(fruitIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Apple</option>
<option value="2">Bannana</option>
<option value="3">Mango</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Water Melon</option>
<option value="2">Kiwi</option>
<option value="3">Peach</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-3">
<select class="form-control ddlFruit">
<option value="1">Strawberry</option>
<option value="2">Papaya</option>
<option value="3">Grapes</option>
</select>
</div>
</div>

Swap HTML <option> values using JavaScript

I've tried a range of methods to try and swap two options and none worked.
I want the first option of select to swap with first option of select1
Is anyone able to provide an example of how to deal with this swap?
Here is the JavaScript I have tried:
$('#swap').click(function() {
var v1 = $('#select').val(),
v2 = $('#select1').val();
$('#select').val(v2);
$('#select1').val(v1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>

Are you trying to do the following?
$('#swap').click(function()
{
var v1 = $('#select option:first-child');
var v2 = $('#select1 option:first-child');
var temp1 = v1.html();
var temp2 = v2.html();
v2.html(temp1);
v1.html(temp2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
<form action="#" class="search-tour__form flex">
<div class="search-tour__form_left-side">
<input type="number" id="amount" value="1" class="search-tour__input">
<div class="search-tour__drop-down">
<select id="select" class="main-dropdown">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="UAH">UAH</option>
</select>
</div>
</div>
<button class="search-tour__btn" value="swap" id="swap" type="button">Swap
</button>
<div class="search-tour__form_right-side">
<div class="search-tour__drop-down">
<select id="select1" class="main-dropdown">
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input type="number" id="result" value="31.37" class="search-tour__input">
</div>
<input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
</form>
</div>

HTML/CSS Animation on pushed down content

I have a Bootstrap row that is hidden by default. After a click on a specific button the jQuery toggle() is called to toggle the display of this row.
Is there a way to animate that button to move down? The button is positioned below the row that is toggled to show/hide.
The #advancetoggle button should move down with animation, if I use CSS's transition: transform(0,100px) the button starts to move down but it jumps due to the row above that gets the display:block and it pushes the button far way down.
Thanks :)
$("#advancetoggle").click(function(event) {
event.stopPropagation();
$('#advanced-search').toggleClass('show hide');
if ($('#adv-icon').hasClass('icon-arrowdown')){
$('#adv-icon').removeClass('icon-arrowdown');
$('#adv-icon').addClass('icon-arrowup');
} else {
$('#adv-icon').removeClass('icon-arrowup');
$('#adv-icon').addClass('icon-arrowdown');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form id="advanced-search">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="typeselect">Type</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="typeselect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="btn btn-red">
RESET FILTER
</div>
</div>
</form>
</div>
<div class="row">
<div class="advanced col-sm-2 col-xs-12">
<i class="icon-arrowdown" id="adv-icon"></i> <span class="advanced-text"> Advanced Search</span>
</div>
</div>

You have some issues in your code:
transition: transform(0,100px) should be transform: translate(0,100px).
To get the transition you need to add transition:all .3s ease (for example).
Insert the span .advanced-text into the link #advancetoggle
$("#advancetoggle").click(function(event) {
event.stopPropagation();
$(this).css('transform', 'translate(0,100px)');
console.log($(this));
$('#advanced-search').toggleClass('show hide');
if ($('#adv-icon').hasClass('icon-arrowdown')){
$('#adv-icon').removeClass('icon-arrowdown');
$('#adv-icon').addClass('icon-arrowup');
} else {
$('#adv-icon').removeClass('icon-arrowup');
$('#adv-icon').addClass('icon-arrowdown');
}
});
#advancetoggle {
display:inline-block;
transition:all .3s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form id="advanced-search">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="typeselect">Type</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="typeselect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="btn btn-red">
RESET FILTER
</div>
</div>
</form>
</div>
<div class="row">
<div class="advanced col-sm-2 col-xs-12">
<a href="#" class="glyphdown" id="advancetoggle">
<i class="icon-arrowdown" id="adv-icon"></i>
<span class="advanced-text">Advanced Search</span>
</a>
</div>
</div>

try this, I think this is what you want.hope this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
.myrow{
display: none;
margin: 10px;
}
.myrowtwo{
display: none;
margin: 10px;
}
.buttonone , .buttontwo{
margin:10px;
}
</style>
<body>
<div class="btn btn-default buttonone">Press me !</div>
<div class="row myrow">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
</div><br>
<div class="clearfix"></div>
<div class="btn btn-primary buttontwo">Press me now!</div>
<div class="row myrowtwo">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".buttonone").click(function(){
$(".myrow").toggle();
});
$(".buttontwo").click(function(){
$(".myrowtwo").toggle();
});
});
</script>
</body>
</html>
I have used online bootstrap and jquery.good luck.

change select to input in cart

I'm trying to change a select list to a text input (an example is amazon cart) based on a value of 10. What I have works for 1 row but I want to add multiple rows. I need some help changing the jquery to only change 1 row at a time.
$(function() {
$('.dropdown-change').on('change', function() {
var dropdownValue = $(this).val();
if (dropdownValue == 10) {
$('.dropdown-control').hide();
$('.input-control').show();
} else {
$('.dropdown-control').show();
$('.input-control').hide();
}
return false;
});
});
.input-control {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row dropdown-row">
<div class="col-xs-2 col sm-2 col-md-2">
<label for="quantity">Qty</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8">
<div class="dropdown-control">
<div class="col-xs-12 col-sm-12 col-md-6 no-pad-left">
<select name="quantity" class="form-control dropdown-change">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</div>
</div>
<div class="input-control">
<div class="col-md-6 no-pad-left">
<input type="text" value="10" size="10" name="quantity" id="quantity" class="form-control" />
</div>
<div class="col-md-6 no-pad-left">
<button class="btn btn-primary btn-xs">update</button>
</div>
</div>
</div>
</div>

I fixed this by changing my HTML around and using $(this).closest() and $(this).next()

Develop Reference

JavaScript is the programming language of the Web.

change classname dynamically when append div - javascript

Related

Parent <div> hides when I click it

To get the selected index for multiple dropdowns of the same class

Swap HTML <option> values using JavaScript

HTML/CSS Animation on pushed down content

change select to input in cart

Categories

Resources