These two select from the same control-group are getting displayed vertically. I want to display them horizontally. I tried doing inline-block on CSS, but there are some other <div> with the same control-group class, with different width and margin settings. Changing the class name doesn't help either.
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
<select name="Delivery" id="Delivery" disabled="">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select>
<script>
var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'OPEN') {
category.value = 'OPEN';
} else {
category.value = 'CLOSE';
}
} else {
category.value = '';
}
}
</script>
</div>
Flexbox version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div style="display: flex; flex-direction: row;">
<select></select>
<select></select>
</div>
</div>
Bootstrap version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div class="row>
<div class="col-md-6>
<select></select>
</div>
<div class="col-md-6>
<select></select>
</div>
</div>
</div>
CSS version:
<div class="control-group">
<label for="week" style="display: block; width: 100%;">Dispatch schedule:</label>
<select style="display: float: width: 49%;></select>
<select style="display: float: width: 49%;></select>
</div>
you could use multi column grid
and set no of columns or width accordingly.
fiddle - https://jsfiddle.net/nLddvkw6/1
**
<div class="control-group">
<div class="row">
<div class="border col-xs-4"><label for="week">Dispatch schedule:</label></div>
<div class="border col-xs-4"><select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
</div>
<div class="border col-xs-4"> <select class="form-control" name="Delivery" id="Delivery" disabled="" style="width:110px;">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select></div>
</div>
</div>
Related
I have this form I want to separate the form into three different sections. One of the sections of the form is the one you see in the picture below around the red border. I have used the fieldset element to separate the section. the code is this:
.field_set {
border-color: black;
border-style: solid;
border: 1px #F00 solid;
}
<fieldset class="field_set">
<div class="form-group m-form__group row">
<legend> Start </legend>
<!-- form group 4(adress) -->
<!-- From address -->
<div class="col-md-4">
<input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="<?php echo trans('manage_request_labels.address_input_placeholder_text');?>">
</input>
</div>
<div class="col-md-4">
<select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_fuel_text');?>
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_euroclass_text');?>
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_vehicle_text');?>
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_vehicle_capacity_text');?>
</option>
<option value="0">
0%
</option>
<option value="10">
10%
</option>
<option value="20">
20%
</option>
<option value="30">
30%
</option>
<option value="40">
40%
</option>
<option value="50">
50%
</option>
<option value="60">
60%
</option>
<option value="70">
70%
</option>
<option value="80">
80%
</option>
<option value="90">
90%
</option>
<option value="100">
100%
</option>
</select>
</div>
</div>
</fieldset>
My first question is why does the border go over the legend text like that and how do you solve it
second question. How would you make the border a bit rounder and more slick kind of
Last question. Is there a better way to separate the section via bootstrap or something? Any ideas are welcomed. I tried to use the well bootstrap class(https://www.w3schools.com/bootstrap/bootstrap_wells.asp) but it did not work for some reason. Nothing happened when I added the well class to the same div as "row" in the code below
You need to override some bootstrap styles (see code below).
But first, move the legend outside the div (it does not belong in there).
To get a bit more space between the elements, wrap them in the class form-group
<div class="form-group">
<input type="text" id="ac" class="form-control" name="google-autocomplete" placeholder="" />
</div>
For rounded border, use border-radius
border-radius: 4px;
.field_set {
border: 2px #F00 solid;
border-radius: 4px;
margin: .75rem;
padding: .75rem;
}
legend {
padding: 4px!important;
width: unset!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset class="field_set">
<legend>Start</legend>
<div class="form-group m-form__group row">
<!-- form group 4(adress) -->
<!-- From address -->
<div class="col-md-4">
<div class="form-group">
<input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
<option value="">
</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
<option value="">
</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
<option value="">
</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
<option value=""></option>
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
</div>
</div>
</div>
</fieldset>
there is some select input wrapped inside div that is controlled by options and also there is data-value in those select options.
the hide and show divs are working perfectly, but there is very weird issue that is when i select first option, it shows calculation of all the select option. but when i remove all the div around of select input then it works perfectly as i want.
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).parent().css("display") != "none") {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<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>
</select>
<div class="row visitor" id="person2" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person3" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div id="totalcost"></div>
when we remove div of select fields, it works as i want. but i want it like above example because there are other fields to show also.
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).parent().css("display") != "none") {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<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>
</select>
<div class="row visitor" id="person2" style="display: none;">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div class="row visitor" id="person3" style="display: none;">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<select name="person[5][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
<div id="totalcost"></div>
whats wrong with the first code snippet. why divs are causing this issue?
Instead of looking for css display, just use $(element).is(':visible') like so
$('body').on('change', '#visitorcount', function() {
var val = $('#country1').val();
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$(`#person${i}`).show();
//Check to see if this is visible, if not
//Set the default value and show it.
if(!$(`#country${i}`).is(':visible')){
$(`#country${i}`).val(val).show();
}
} else {
$(`#person${i}`).hide();
$(`#country${i}`).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).is(':visible')) {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<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>
</select>
<div class="row visitor" id="person2" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person3" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div id="totalcost"></div>
I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>
You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>
I have a modal which initially has two <div> elements inside. But users can dynamically add additional <div> elements also.
What I want to do is to show only the default two <div>s each time modal is closed and reopened.
I tried the following:
$('#modal').on('show.bs.modal', function () {
$(this).removeData('bs.modal');
});
It did not help.
How can I do this?
Initial modal body:
<div class="modal-body">
<div class="row" id="leg-1">
<div class="col-md-5" id="pickup-info-1">
<div class="row">
<div class="col-md-1">
<p class="split-location__leg-number">1</p>
</div>
<div class="col-md-11">
<p><span id="pickup-name-1"></span> <br/> <span id="pickup-address-1"></span> <br/> <strong><span id="pickup-city-1"></span>, <span id="pickup-state-1"></span> <span id="pickup-zip-1"></span></strong> <br/> Contact: <span id="pickup-contact-1"></span><br/> Phone: <span id="pickup-phone-1"></span></p>
<p id="pickup-date-1"></p>
</div>
</div>
</div>
<div class="col-md-7" id="delivery-info-1">
<div class="row">
<div class="col-md-10">
<form class="split-location-form">
<div class="form-group">
<input type="text" class="form-control" id="delivery-name-1" placeholder="Name" value="BusinessName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-contact-1" placeholder="Contact" value="ContactName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-phone-1" placeholder="Phone" value="+99893497989">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-address-1" placeholder="Address" value="ContactAddress">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="delivery-city-1" placeholder="City" value="ContactCity">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control split-location__state" id="delivery-state-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FM">Federated States Of Micronesia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MH">Marshall Islands</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV'">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC'">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="MP">Northern Mariana Islands</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PW">Palau</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VI">Virgin Islands</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="number" class="form-control split-location__zip" id="delivery-zip-1" placeholder="ZIP" value="100189">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="date" class="form-control" id="delivery-date-1" placeholder="Delivery date" value="2016-10-10">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="split-location-form__price">Price:</label>
<input type="number" id="delivery-price-1" class="form-control split-location-form__price" value="600">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-sm split-location__delete-leg-btn" title="Delete this leg" data-id="1" id="delete-btn-1">Delete</button>
</div>
</div>
</div>
</div>
<hr/>
<div class="row" id="leg-2">
<div class="col-md-5" id="pickup-info-2">
<div class="row">
<div class="col-md-1">
<p class="split-location__leg-number">2</p>
</div>
<div class="col-md-11" id="pickup-info-exists-2">
<p><span id="pickup-name-2"></span> <br/> <span id="pickup-address-2"></span> <br/> <strong><span id="pickup-city-2"></span>, <span id="pickup-state-2"></span> <span id="pickup-zip-2"></span></strong> <br/> Contact: <span id="pickup-contact-2"></span><br/> Phone: <span id="pickup-phone-2"></span></p>
<div class="form-group">
<input type="date" id="pickup-date-2" class="form-control split-location__pickup-date">
</div>
</div>
<div class="col-md-11" id="no-pickup-info-2">
<p class="text-muted">Pickup information is <br/> not available yet</p>
<div class="form-group">
<input type="date" id="pickup-date-2" class="form-control split-location__pickup-date">
</div>
</div>
</div>
</div>
<div class="col-md-7" id="delivery-info-2">
<div class="row">
<div class="col-md-10">
<p><span id="delivery-name-2"></span><br/><span id="delivery-address-2"></span> <br/> <span id="delivery-city-2"></span>, <span id="delivery-state-2"></span> <span id="delivery-zip-2"></span><br/> Contact: <span id="delivery-contact-2"></span><br/> Phone: <span id="delivery-phone-2"></span></p>
<div class="form-group">
<p>
<span style="margin-right: 30px" id="delivery-date-2"></span> Price:
<input type="number" class="form-control split-location-form__price" id="delivery-price-2">
</p>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<button type="button" id="add-leg-btn" class="btn btn-success split-location__add-leg-btn">Add New Leg</button>
</div>
</div>
</div>
Basically, it has three main parts:
<div class="row" id="leg-1">
....
</div>
<hr>
<div class="row" id="leg-2">
....
</div>
<button>Add Leg</button>
The first two divs are initial defaults. When a user presses a Add Leg button, another div with id leg-3 (and so on.) is inserted into the template.
Add a class to the added <div>, ie. '.addedDivClass',
Then use jQuery .remove() to remove the elements when you show the modal.
$('#modal').on('show.bs.modal', function () {
// Get the added divs within the modal and remove them
$('.addedDivClass', this).remove();
});
Read more about remove() here.
try the following:
$('#modal').on('show.bs.modal', function () {
// Get the added divs within the modal and remove all except the first 2
$('div[id^="leg"]').not('#leg-1,#leg-2').remove();
});
demo: https://jsfiddle.net/hmf2v4bj/
I am new to jQuery and think I'm close to what I'm needing.
I need to get the value from the data-status and then set the correct select option and selected.
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
// u = updated
// n = new
if (optionStatus == 'u') {
foundStatus = $currentStatus.find('select option');
if ($(foundStatus).val() == 'u') {
$(this).attr('selected', 'selected');
} else if ($(foundStatus).val() == 'n') {
$(this).attr('selected', 'selected');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
You should simply use .val() method to set the value of element.
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
$currentStatus.find('select').val(optionStatus);
});
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
$currentStatus.find('select').val(optionStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>