I want to add a select field multiple times depending on the number of clicks the user makes. A toggle or show/hide function will only work for 1 select field.
How would I be able to do that?
e.g: 1 click = add 1 select field
<select name='' id='' class="">
<option value='en-us'>USA</option>
<option value='de-de'>Germany</option>
<option value='en-in'>India</option>
<option value='en-gb'>United Kingdom</option>
<option value='en-au'>Australia</option>
</select> <br>
<button id='add-countries'>add more countries</button>
I have prepared a sample html for this: http://jsfiddle.net/stan255/Wh274/
Something like this should do the trick. jQuery is used here for simplicity, but is not required.
<div id="template">
<select name='' id='' class="">
...
</select>
</div>
<button id='add-countries'>add more countries</button>
var $template = $('#template');
$('#add-countries').on('click', function () {
$(this).before($template.clone());
});
Here's an updated fiddle: http://jsfiddle.net/Wh274/3/.
Note that this does not account for assigning unique names to each <select> so you will need to add that logic or account for it on the server side.
if you could javascript (jQuery)
<script>
$(function(){
$('button#add-countries').click(function(){
newName = prompt('Please input new name');
newAttr = prompt('Please input new short name');
newItem = '<option value="'+newAttr+'">'+newName+'</option>';
$('select').append(newItem);
});
})
</script>
OR
<script>
$(function(){
$('button#add-countries').click(function(){
alert($('select option:selected').val())
});
})
</script>
Related
when i click button clone is worked but it is showing value only one dropdown list
i want to get value clone multiple dropdown list and show the alertbox
there is my code
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('#idcuntry').val();
alert(a);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="idcuntry">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">
The first problem is that you are getting the value of #idcuntry, and there's only one with this ID (which is good, IDs should be unique, so you made the right choice of changing the ID of your clones).
To target multiple elements, you can add a class to them, for example class="countryselect".
Then, .val() will only return the value of the first element. But you can use .map() to get them all in an Array:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('.countryselect').map(function() {
return $(this).val();
}).get();
alert(a);
});
});
</script>
<select id="idcuntry" class="countryselect">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">
I'm seeking guidance to get me going in the right direction. My professor is at a loss. I'm having issues with the POST in my form for the select2 multiple fields. I have a Yes/No flag, that determines which select 2 select option to show.
The javascript below works great for the show/hide.
$(document).ready(function () {
$('#option').change(function () {
$this = $(this)
$('.select_box').each(function () {
$select = $('select', this);
if ($select.data('id') == $this.val()) {
$(this).show();
$select.show().select2();
} else {
$(this).hide();
$('select', this).hide();
}
});
});
});
My form has a Yes/No/NA option, which dictates what select 2 box to show using the javascript above.
<select name ="option" class="form-control " id="option">
<option value="1"> Yes</option>
<option value="0"> No</option>
<option value="2"> N/A</option>
</select>
My form POST is handled with the general POST option as shown below:
<form action = "{% url 'final' %}" form method = "POST">
Inside my form I have the .select_box div class. The select 2 option gives the correct fields and populates the multi-select correctly.
<div id = "div_yesselect" class="select_box">
<script src= "{% static '/accounts/option_select2.js' %}" type="text/javascript"></script>
<select data-placeholder="Please select your course(s)?" data-id="1" class="js-example-basic-multiple" multiple="multiple" id = "id_courseselect" value = "{{course.id}}" style="width: 1110px" >
{% for course in courses%}
<option value="{{course.name}}" name = "courseid" >{{course.name}}</option>
{% endfor %}
</select>
The POST goes through when the user hits the Submit Button. I can verify all the fields in my form except for the select2 option when a user selects multiple options, or a single option.
<button class="btn btn-primary " type="submit">Submit</button>
In my final view when trying to request the POST on the select2 name it returns an empty set, but everything else in the form returns the correct value. Why doesn't the select2 option post correctly?
courselist = request.POST.getlist('courseid')
Form POST in Django depends on name attributes. When you request courseid, it's going to look for an element with name attribute equal to courseid, meaning:
courselist = request.POST.getlist('courseid')
needs a matching element, for example
<select name="courseid" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You need to add name attribute to your select element and it should work.
I'm using jquery.load() to get an html code. This html is a form with js inside.
My problem, I want to get selected value of an input inside this form, but it returned "" even if there is an selected value..
Main-page.html:
url = "http://url-to-get-info-div";
$('#info').load(url);
The Main-page.html then has then a form and script inside
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
</div>
<script type="text/javascript">
----some script who need $("#id_nature)---
function calcul_indemnisation(nature_litige = $("#id_nature").val()){
---some work who use id_nature value---
return montant_indemnisation
}
$("#calcul_indemnisation").click(function(){
montant_indemnisation = calcul_indemnisation();
}
</script>
the problem is when a click on the button "#calcul_indemnisation, the return value is not correct because id_nature value is not got correctly
I resolve it ! In fact, I had another select with the same id further in the code! so there was a conflict with the id name
Use .on() to wire up generated elements, or use .load() syntax and give one function as parameter.
function calcul_indemnisation(){
var option = $('#id_nature').find(':selected');
var value = option.val();
var text = option.text();
//perform the calculations
return value;
};
//.load(url, function)
$('#info').load('url-you-need', function(){
//create click event in #calcul_indemnisation
$('#calcul_indemnisation').click(function(){
console.clear();
console.log('triggered with load .click(): ' + calcul_indemnisation());
});
});
//create click event on #calcul_indemnisation inside #info.
$('#info').on('click','#calcul_indemnisation',function(){
let montant_indemnisation = calcul_indemnisation();
console.log('triggered with .on() click: ' + montant_indemnisation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
<input type="button" id="calcul_indemnisation" value="Click me!"/>
</div>
I have multiple drop down with same value.If they select Lunch first time from other drop down I have to remove Lunch. Following is my code
Front end code
<?php for($i=1; $i<=7; $i++)
{?>
<select name="task<?php echo $i;?>" onchange="checkSelected(this,<?php echo $i; ?>);" id="task<?php echo $i;?>"
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
<?php } ?>
In javascript I am removing 3rd select box (task3) its got removed but i have to remove all the other except the selected one how i can implement this
javascript function
function checkSelected(e,number)
{
if(e.value == 'Lunch')
{
$('#task3 option[value="Lunch"]').remove();
}
}
I tried this but its not working
$("#task+"number"+ > option[value='Lunch']").remove();
It should be
$("#task" + number + " > option[value='Lunch']").remove();
You could use the .each() function to remove only the option that has the value you select from the list.
$('select').change(function(){
var value = $(this).val()
// Probably best to store this value here before removing the option below.
$(this).children().each(function(){
if($(this).val() == value){
$(this).remove();
}
});
});
Working example - http://jsfiddle.net/amQuU/
Example with multiple dropdowns http://jsfiddle.net/amQuU/1/
Example that removes the options from another select box - http://jsfiddle.net/amQuU/2/
The only problem in doing this is that by removing the selected option it is not shown as the selected option. you can however store the value after selecting it and before removing it from the list as commented above.
Another thing you should consider is changing .remove() to .attr('disabled','true') so that you can re-enable the option later on if you need to e.g. someone wants to go back and change the previous select. Here is an example of that too http://jsfiddle.net/amQuU/3/
If only the "lunch" option is concerned by your answer (see my comment above), then there's a solution. It's not already full-optimized, but you see how you can do it.
JSFiddle http://jsfiddle.net/4qndV/1/
HTML
<form action="demo.html" id="myForm">
<p>
<label>First:</label>
<select class="event_handler" name="task1">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<p>
<label>Second:</label>
<select class="event_handler" name="task2">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
JQuery
$(function () {
// Handler for .ready() called.
$(".event_handler").on("change", function () {
event.preventDefault();
var name_select = $(this).attr("name");
if ($(this).val() == "Lunch") {
//Loop through each "lunch" element
$('.event_handler option[value=Lunch]').each(function(){
//Remove all 'lunch' option, except the ont in the 'name_select' select
if($(this).parent().attr("name") != name_select){
$(this).remove();
}
});
}
})
});
NB: I suppose you have to allow the user to change his selection. It's why I use "disable" in place of "remove". But you can easily adapt this code if you really want to remove the option element.
I am using Cart66 which does not change the price of the cart until after the user views their cart. I need a way to change the price on the current item so the user knows the price has changed. I figured this could be done using jquery/js but cannot figure out how.
Increase/Decrease the price of "cart66-price-value" based off the value within "()" of "cart66-select" option text.
<script class="cart66-select">
<option value="A">Coral</option>
<option value="B">Passion Fruit (+5.00)</option>
</script>
<strong class="cart66-price-value">$24.00</strong>
Can be done using jQuery yes #Aaron. Look at an example that did
<select class="cart66-select">
<option value="$24.00">Coral</option>
<option value="$29.00">Passion Fruit (+5.00)</option>
</select>
<strong class="cart66-price-value">$24.00</strong>
var changePrice = function()
{
var select = $(".cart66-select"),
displayPrice = $(".cart66-price-value");
select.change(function(){
var selected = $(this).children("option:selected").val();
displayPrice.text(selected);
});
}
changePrice();
<select class="cart66-select">
<option value="A" price="10">Coral</option>
<option value="B" price="5">Passion Fruit (+5.00)</option>
</select>
<strong class="cart66-price-value">$<span id="price">24.00</span></strong>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".cart66-select").change(function(){
var price = parseInt(jQuery(this).find(':selected').attr('price')).toFixed(2);
jQuery("#price").html(price);
});
});
</script>