I have a dropdown button for filtering the data. The value of the dropdown list will contain the categories of a column from the dataset.
I already have a function to get the categories from the dataset, now I just want to add it to the dropdown list.
This is my code for add new option to the dropdown button:
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append(`<option value="${optionValue}">
${optionText}
</option>`);
}
</script>
This is the code for dropdown list:
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1" onclick="addOption()">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
How to make the dropdown add the option once, because with my code, whenever I click the button, it will add the option again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
crossorigin="anonymous"></script>
</head>
<body>
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1" onclick="addOption()">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append(`<option value="${optionValue}">
${optionText}
</option>`);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
Or you can try it with JSFiddle.
Use jQuery's .one-binding to only execute code once. Also, you should not use inline event listeners.
$(document).ready(function() {
$('#select1').one('click', function() {
optionText = 'Premium';
optionValue = 'premium';
$(this).append(`<option value="${optionValue}">${optionText}</option>`);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
I am wondering if this is what you are looking for: https://jsfiddle.net/m5jetdqc/
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1" onclick="!added && addOption()">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
<script type="text/javascript">
let added = false;
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append(`<option value="${optionValue}">
${optionText}
</option>`);
added = true
}
</script>
You can remove last element of list before inserting new one. Use below code to remove last element from dropdown:
$("select[id=select1] option:last").remove();
Related
I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn't find suitable documentation of this plugin too. this is my code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-countryCode="DZ" value="213">Algeria</option>
<option data-countryCode="AD" value="376">Andorra</option>
<option data-countryCode="AO" value="244">Angola</option>
<option data-countryCode="AI" value="1264">Anguilla</option>
<option data-countryCode="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<!-- Use as a jQuery plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#country").change(function()
{
let value="+"+$(this).val();
$('#txtPhone').val(value);
})
var code = "+977"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
});
});
</script>
</body>
</html>
To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:
$(function() {
$("#country").change(function() {
let countryCode = $(this).find('option:selected').data('country-code');
let value = "+" + $(this).val();
$('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
});
var code = "+977";
$('#txtPhone').val(code).intlTelInput();
});
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-country-code="DZ" value="213">Algeria</option>
<option data-country-code="AD" value="376">Andorra</option>
<option data-country-code="AO" value="244">Angola</option>
<option data-country-code="AI" value="1264">Anguilla</option>
<option data-country-code="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
In my Laravel app, I have a form to select multiple options. However, I don't want to select multiple options by pressing CTRL and then selecting them. I just want to be able simply click on the options and they should be selected. And, if I click on a selected option again, then it should be de-selected.
How can I achieve this task?
Here is an example of my select options list.
<div class="form-group row">
<label class="col-form-label" for="selectednames[]">Select Name</label>
</div>
<div class="form-group row">
<select multiple name="selectednames[]">
<option value="1">John</option>
<option value="2">Sam</option>
<option value="3">Max</option>
<option value="4">Shawn</option>
</select>
P.S: I am using bootstrap and jquery in my application.
simply use checkbox type as input instead of option, like that:
<div class="form-check">
<input type="checkbox" name="selectednames[]" value = "1" />
<input type="checkbox" name="selectednames[]" value = "2" />
<input type="checkbox" name="selectednames[]" value = "3" />
<input type="checkbox" name="selectednames[]" value = "4" />
</div>
I think you want somethings like this :
$('select[multiple]').multiselect()
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head>
<body>
<select multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>
I Want have a multi select box to create tags,I used this code and download select2.min.css and select2.min.js from https://github.com/select2/select2 and copied in css and js file in project,
My code in html file is here:
<link rel="stylesheet"href="https:
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="
{{asset('css/select2.min.css')}}">
<script type="text/javascript" src="{{asset('js/select2.full.min.js')}}">
</script>
<script type="text/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="{{asset('js/select2.min.js')}}">
</script>
<div class="form-group">
<label class="control-label col-sm-2" for="tags">tags:</label>
<select class="form-control select2-multi" name="tags"
multiple="multiple">
#foreach($tags as $tag)
<option value='{{$tag->id}}'>{{$tag->name}}</option>
#endforeach
</select>
</div>
<script>
$('.select2-multi').select2();
</script>
But this Code didn't Work for me,How I Can fixed it?
Image of this code is here:
You need to include jQuery in your project as $ will be undefined. Below is the sample:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<div class="form-group">
<label class="control-label col-sm-2" for="tags">tags:</label>
<select class="form-control select2-multi" name="tags" multiple="multiple">
<option value='tag1'>tag 1</option>
<option value='tag2'>tag 2</option>
<option value='tag3'>tag 3</option>
</select>
</div>
<script>
$('.select2-multi').select2();
</script>
But it will always be a good practice to include your JS code on DOM ready like:
$(function(){
$('.select2-multi').select2();
});
<div class="form-group col-md-2">
{{ Form::label('from', null, ['class' => 'control-label']) }}
<select name="from" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true">
<option value="1">Airport</option>
</select>
</div>
<div class="form-group col-md-1">
<input type="button" value="swap" id="swap">
</div>
<div class="form-group col-md-2">
{{ Form::label('to', null, ['class' => 'control-label']) }}
<select name="to" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true">
#foreach($services as $key => $value)
<option value="{{$value->id}}">{{ $value->location }}</option>
#endforeach
</select>
</div>
I have it, I want to make it all value of select reverse With a button and jQuery with dynamically can you help me Please
Sample
When i click button will be
Selected with all options will move to "from" select
As in the codepen that I linked https://codepen.io/anon/pen/KvPREO, here is the code:
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
</head>
<body>
<div class="wrapper">
<div id="select-from-container" class="form-group col-md-2">
<select class="selectpicker form-control mySel" multiple data-max-options="1" required="true">
<option value="1">Airport</option>
</select>
</div>
<div class="form-group col-md-1">
<input type="button" value="Swap" id="swap">
</div>
<div id="select-to-container" class="form-group col-md-2">
<select class="selectpicker form-control mySel" multiple data-max-options="1" required="true">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
Javascript:
$('#select-to-container select').selectpicker();
$('#select-from-container select').selectpicker();
$('#swap').on('click', function(){
// get current selections
select_to_value = $('#select-to-container select').val()
select_from_value = $('#select-from-container select').val()
// Copying selects
select_to = $('#select-to-container select').clone();
select_from = $('#select-from-container select').clone();
// taking original names
select_to_name = $('#select-to-container select').prop('name');
select_from_name = $('#select-from-container select').prop('name');
// cleaning up
$('#select-to-container').html('');
$('#select-from-container').html('');
// add selects again
$('#select-to-container').html(select_from);
$('#select-to-container select').prop('name',select_to_name);
$('#select-from-container').html(select_to);
$('#select-from-container select').prop('name',select_from_name);
// re-bind selectpicker
$('#select-to-container select').selectpicker();
$('#select-from-container select').selectpicker();
// re-select original selections
$('#select-to-container select').val(select_from_value);
$('#select-from-container select').val(select_to_value);
// refresh selectpicker to show the selected values
$('.selectpicker').selectpicker('refresh');
});
I want to pass the selected value of my combo box to the the input value which has a id of "val".
I tried passing the value using jquery
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
But it's not working. Please help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
</script>
</body>
</html>
.change is not neccessary. On the Button click you can directly access the selected value of your dropdown. Please check the below code.
$(document).ready(function() {
$('#btn').click(function(e) {
alert($('#combobox option:selected').val());
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
</body>
</html>
you need to remove the click event in #btn
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
https://jsfiddle.net/
Please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
});
</script>
</body>
</html>
You have nested your event handlers. Change within click. That is always a sign that the code is wrong. You will be adding a new change handler on every click, which is not what you want.
It is not 100% clear what you are trying to do, but you can start like this:
$(function() {
$('#combobox').change(function() {
var selected = $(this).val();
$('#val').val(selected);
alert($('#val').val());
});
});
Note: val() on a select will return the selected value, so you do not need to use option:selected and its text.