How to make select dropwdown width same? - javascript

I want to make the same width of both select.
Mean I want both select width same irrespective of option value
I want to make the same width of both select.
Mean I want both select width same irrespective of option value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I think it should be as simple as using CSS to set the width of the select elements in question:
select{ width: 16ch; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can modify your select element to have an explicit width: run snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<style type="text/css">
.form-select {
width:200px
}
</style>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

JavaScript: only first object selected from drop-down box logs to console

I have a drop-down menu and I'd like to log when the value of the selection changes. Currently, only the first element is being logged to the console. Here is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Example</title>
</head>
<body>
<div class="container-fluid">
<!-- header -->
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Example</h1>
</div>
</div>
<!-- drop-down -->
<div class="row justify-content-center">
<div class="align-self-center">
<div class="user-control">
<div class="form-group">
<select id="categories" class="form-control">
<option value="All Categories">All Categories</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
<option value="Category 3">Category 3</option>
</select>
</div>
</div>
</div>
</div>
<script src="my_js.js"></script>
</body>
</html>
JavaScript:
let select = document.getElementById("categories");
let value = select.options[select.selectedIndex].value;
console.log(value)
Why am I not able to see anything other than "All Categories"?
Thanks!
Wrap it in a listener. IE:
select.addEventListener('change', e => {
let value = select.options[select.selectedIndex].value;
console.log(value)
})
let select = document.getElementById("categories");
select.addEventListener('change', e => {
let value = select.options[select.selectedIndex].value;
console.log(value)
})
<div class="container-fluid">
<!-- header -->
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Example</h1>
</div>
</div>
<!-- drop-down -->
<div class="row justify-content-center">
<div class="align-self-center">
<div class="user-control">
<div class="form-group">
<select id="categories" class="form-control">
<option value="All Categories">All Categories</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
<option value="Category 3">Category 3</option>
</select>
</div>
</div>
</div>
</div>
Your code works but only when the page loads. Adding your existing code inside an event listener is what your looking for!
const dropdown = document.getElementById('categories');
dropdown.addEventListener('change', (e) => {
let select = document.getElementById("categories");
let value = select.options[select.selectedIndex].value;
console.log(value)
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Example</title>
</head>
<body>
<div class="container-fluid">
<!-- header -->
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Example</h1>
</div>
</div>
<!-- drop-down -->
<div class="row justify-content-center">
<div class="align-self-center">
<div class="user-control">
<div class="form-group">
<select id="categories" class="form-control">
<option value="All Categories">All Categories</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
<option value="Category 3">Category 3</option>
</select>
</div>
</div>
</div>
</div>
<script src="my_js.js"></script>
</body>
</html>

jquery for the drop-down select

Here is my index file code. whenever I select something into the drop-down then show me related dropdown.
I put this code in my file but I can't get drop down after selecting the main type.
css file code is .hide{display:none;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class=" hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
Your problem is type class=" hide" change to class="hide"
and you need move your script to before close body tag not head tag.
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
//$('.hide').show();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
.hide{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class="hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>

Can't use materialize-select?

i try to use materialize-select,and it does't work?
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
Try the following
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems,{});
});
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

Bootstrap: Multiple select fields inside one

I'm looking for a way to implement a custom select field that has a functionality of several select fields (each one has only one selectable entry). I didn't find any way to merge all the select fields into one, either nor way to allow one selection per form category.
Here is what I have
Here is what I am trying to achieve
Example of my current structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page</title>
<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>
<style>
.table > tbody > tr > td {
text-align: center;
vertical-align:middle;
}
.col-xs-2 {
padding-top: 10%;
padding-left: 10%;
}
</style>
</head>
<body>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</body>
Update: I found a jQuery plugin that does this for you. It is called Bootstrap-select. Check it out here: https://silviomoreto.github.io/bootstrap-select/
This plugin converts a <select> into a Bootstrap Dropdown. One of its features is that you can have a <select multiple>...</select> with <optgroup>(explained below) and you can set the max number of selections per <optgroup> using a data-max-options attribute. So you can just set it to 1 for each <optgroup>. Here is the documentation for that feature: https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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.2/js/bootstrap-select.min.js"></script>
<div class="container">
<select class="selectpicker" multiple>
<optgroup label="Color" data-max-options="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Style" data-max-options="1">
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</optgroup>
<optgroup label="Size" data-max-options="1">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 1:
I think you want to use <optgroup>s to contain multiple groups of <option>s into one <select>. And to make sure you can select more than one option, you need to add the multiple Boolean attribute to your <select>. However, you still need to make it so you can only select a maximum of one <option> per <optgroup>. The answer from this question provides a good piece of javascript code that does that.
Here is a demo that I put together. Hold Control on your keyboard to select multiple options. Notice that if you try to select another option from the same <optgroup>, the previous selection will be de-selected.
$('select optgroup option').click(function() {
$(this).siblings().prop('selected', false);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<select class="form-control" multiple style="width:200px;height:400px;">
<optgroup label="Color">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</optgroup>
<optgroup label="Style">
<option>Square</option>
<option>Sphere</option>
</optgroup>
<optgroup label="Size">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 2
Here is a new solution that I created using Boostrap's Dropdowns. I created this one since the other solution isn't a dropdown so might not be what you are looking for. Let me know if it works for you.
$('.dropdown-menu li a').click(function() {
var groupId = $(this).attr('href');
$(groupId).val($(this).attr('data-sel'));
$(this).closest('.dropdown-menu').find('li a[href="'+groupId+'"]').removeClass('bg-success');
$(this).addClass('bg-success');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">Color</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Style</li>
<li>Square</li>
<li>Sphere</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Size</li>
<li>Tiny</li>
<li>Smallest</li>
<li>Small</li>
<li>Medium</li>
<li>Big</li>
<li>Biggest</li>
<li>Huge</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</div>

Auto next focus with datalist to datepicker

My form elements work with auto next focus except for first input. My first input has datalist and when I selected a list it's not going to focus next (datepicker) input. But if I start with second input my auto focus function is work very well how can I handle it? And I also shared on codepen
$(document).ready(function() {
$('.flexdatalist').flexdatalist({
minLength: 0,
searchContain: true,
}).on('select:flexdatalist', function() {
$('#checkin').focus();
});
var assignPicker = function(id, whenClosed) {
if (typeof whenClosed !== 'function') {
whenClosed = null;
}
return new Pikaday({
numberOfMonths: 2,
field: document.getElementById(id),
format: "DD.MM.YYYY",
minDate: new Date(),
firstDay: 1,
maxDate: new Date(2020, 12, 31),
onSelect: function() {
e = this.getDate();
},
onClose: whenClosed
});
}
assignPicker('checkin', function() {
$('#checkout').focus();
});
assignPicker('checkout', function() {
$('#select').focus();
});
});
body {
padding: 30px;
}
input,
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" />
<link rel="stylesheet" href="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' />
<datalist id="languages">
<option value="PHP">PHP</option>
<option value="JavaScript">JavaScript</option>
<option value="Cobol">Cobol</option>
<option value="C#">C#</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Pascal">Pascal</option>
<option value="FORTRAN">FORTRAN</option>
<option value="Lisp">Lisp</option>
<option value="Swift">Swift</option>
<option value="ActionScript">ActionScript</option>
</datalist>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<input type="text" class="checkin" id="checkin" />
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<input type="text" class="checkout" id="checkout" />
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<select name="select" id="select">
<option value="0">Choose</option>
<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>
</select>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>
<script src="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script>
</body>
</html>
Most of your code was ok after I dealt with all of the issues of loading files over http instead of https.
The core of this solution was in using onSelect inside of pickaday configuration, as opposed to onClose and defining your assignPicker function without var.
https://codepen.io/anon/pen/VPWaJo
Correct the input tags for datalist. like this :
<form action="" method="get">
<input list="languages" name="languages">
<datalist id="languages">
<option value="PHP">
<option value="JavaScript">
<option value="Cobol">
<option value="C#">
<option value="C++">
<option value="Java">
<option value="Pascal">
<option value="FORTRAN">
<option value="Lisp">
<option value="ActionScript">
</datalist>
</form>

Categories