Develop Reference

HTML select with option to enter custom value inside a table

I am trying to add select box where user can select the option from a predefined set or enter a custom value. The select element is inside a table. unfortunately datalist is not going to work for me. I modified the solution found in HTML select form with option to enter custom value to fit my needs and it almost works except when I select 'Enter Option' (to type the custom value) the cell height doubles. How can I keep the table cell height same? I am hoping some simple css trick. Here is my http://jsfiddle.net/oyb2Lgvr/
Thanks in advance for all your help. code below:
<table id="tid">
<tbody>
<tr>
<td>column1</td>
<td>
<select>
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="non" value="option3">Option3</option>
<option class="editable" value="">Enter Option</option>
</select>
<input class="editOption" style="display:none;" placeholder="Enter Value"></input>
</td>
</tr>
<tr>
<td>column1</td>
<td>
<select>
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="non" value="option3">Option3</option>
<option class="editable" value="">Enter Option</option>
</select>
<input class="editOption" style="display:none;" placeholder="Enter Value"></input>
</td>
</tr>
</tbody>
</table>
javascript
$('#tid > tbody > tr > td:nth-child(2)').change(function() {
var selected = $('option:selected', this).attr('class');
if (selected == "editable") {
$(this).find('.editOption').show();
$(this).find('.editOption').keyup(function() {
var editText = $(this).find('.editOption').val();
$(this).find('.editable').val(editText);
$(this).find('.editable').text('Enter Option');
});
} else {
$(this).find('.editOption').hide();
}
});
CSS
#tid td {
border-collapse: collapse;
border: 1px solid black;
width: 80px;
max-height: 5px;
}
.editOption {
width: 80%;
position: relative;
top: -20px;
border: 0;
padding-left: 5px;
}

You could make .editOption absolutely positioned, like this:
.editOption {
width: 80px;
position: absolute;
left: 0;
border: 0;
padding-left: 5px;
}
UPDATE: To make this work with multiple columns in the table, assign a non-static position to td so that .editOption lies within the table cell.
#tid td {
position: relative;
border-collapse: collapse;
border: 1px solid black;
width: 80px;
max-height: 5px;
}

Custom Validation and error message for Custom Select

function setError(input, message) {
const form = input.parentElement;
const small = form.querySelector('small');
small.innerText = message;
form.className = 'inputfield error';
}
function setSuccess(input) {
const form = input.parentElement;
form.className = 'inputfield success';
}
Here is my JavaScript code for setting error or success to the input fields. It is working fine for the inputs.
but when I am trying to apply the same code for custom select boxes it is not working. I am new to web development so any sort of help would be appreciated.
reference Input Field Code :
<div class="inputfield">
<label>NID</label>
<input type="text" value="" class="input" id="nid" onkeyup="checkNid()">
<small>Error Message</small>
</div>
reference Custom Select Code :
<div class="inputfield">
<label>Gender</label>
<div class="custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
</div>
<small>Error Message</small>
</div>
Here is the output. I am expecting the same sort of error message for the select fields too:
output

Replace your reference Custom Select Code with this:
<div>
<label>Gender</label>
<div class="inputfield custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
<small>Error Message</small>
</div>
</div>
If you had shared your CSS file, I would have suggested how to style it better.

.wrapper .form .inputfield .custom_select {
position: relative;
width: 100%;
height: 37px;
}
.wrapper .form .inputfield .custom_select:before {
content: '';
position: absolute;
top: 12px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent transparent;
pointer-events: none;
}
.wrapper .form .inputfield .custom_select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
border: 0px;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
helere is the css for the custom selection

Combine Together Select Class and Input Class

At the moment I have to select a value from the drop down list and then click the button Items Per Page. I don't want to have to click the Items Per Page button. I want to embed the functionality from the Items Per Page button into the 4 options (3,6,9,12) in the Select element.
<form method="GET">
<input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
<select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="">
<option value="3">3 </option>
<option value="6">6 </option>
<option value="9">9 </option>
<option value="12">12 </option>
</select>
</form>
I have had a couple of attempts (including the two below) and don't think any of them have been remotely close.
<option value="3" type="submit">3 </option>
<option class="btn btn-primary mb-4 height" value="6">6 </option>
I Googled the issue but did not find anything remotely along the right lines. Does anyone have any suggestions or links to documentation?
Problem Solved
I resolved my problem with onchange="javascript:this.form.submit()". The below code works perfectly.
<div class ="example" style="display: inline-block" ><div style="text-align:center"> <form method="GET">
<input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
<select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="ItemsPerPage" onchange="javascript:this.form.submit()">
<option value="3">3 </option>
<option value="6">6 </option>
<option value="9">9 </option>
<option value="12">12 </option>
</select>
</form>
</div></div>
I learnt about onchange="javascript:this.form.submit()" from Larrys post (How to Submit Form on Select Change).

Here is one when you select any value(number) JavaScript detects the value(number) you selected and it create elements based on the value(number) and append them in the DOM
so it's up to you to customize the contents div
const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
container.innerHTML = "";
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement('div');
content.classList.add('content');
container.appendChild(content);
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.app {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 12% 88%;
background: #5F9EA0;
}
select {
width: 100px;
height: 50px;
background: red;
color: #fff;
font-size: 24px;
border-radius: 10px;
outline: none;
}
#container {
width: 100%;
height: 100%;
background: darkcyan;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.content {
width: 150px;
height: 150px;
border-radius: 15px;
background: darkgreen;
margin: 10px;
}
<div class="app">
<select class="nothing">
<option>0</option>
<option>3</option>
<option>6</option>
<option>9</option>
</select>
<div id="container"></div>
</div>
if this doesn't answer your question please let me know if there could be any farther support

How to always show the first option as selected in HTML Select?

I've an HTML select where I want to achieve something when I select any option from the select menu it should not show those selected option into the box instead it has to show the first option always regardless of whatever user chose from the option inside.
Here is my CSS code for the div and Select:
.styled select {
background: transparent;
width: 140px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
width: 40px;
height: 34px;
border: 1px solid #46b8da;
border-radius: 3px;
overflow: hidden;
background-color: #5bc0de;
}
<div class="styled">
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
</div>
Here, from the above code you can see that the dropdown box or the div is actually smaller than the select menu (which is required in my case) which matches with the first option {} but if I chose any other option from the below then most of the text is getting cut which is not good looking that's why I need your help or suggestion to know how to achieve this. Thanks.

Thanks everyone for taking time to read my question and for your valuable suggestion. But here I've found a solution to my problem. Now, I'm using a javascript function which will make the selectedIndex = 0 after each selection made.
here is the code:
function drpChanged(ddl) {
var drpInsertMerge = document.getElementById("drpInsertMerge");
var selectedText = drpInsertMerge.options[drpInsertMerge.selectedIndex].innerHTML;
var selectedValue = drpInsertMerge.value;
drpInsertMerge.selectedIndex = 0;
return false;
}
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
Thanks again everyone.

way that you are going to design is wrong.This might be a way to increase the width of your styled class in css.
.styled select {
background: transparent;
width: 500px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
width: 300px;
height: 34px;
border: 1px solid #46b8da;
border-radius: 3px;
overflow: hidden;
background-color: #5bc0de;
}
<div class="styled">
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>

How to override css property to default?

Updated
I have set the "height: auto;" property via style on both the fieldset and select elements, however it still results in the select box having the original height specified in the CSS for "fieldset select" which is 20px. If I change that to "auto" in the CSS it works, but as I need to override it, I am at a loss as to what is causing this.
<fieldset style="width:62%; float:left; margin-left: 19%; height: auto; !important">
<select style="height: auto; !important" name="searchable[]" id='searchable' multiple='multiple' size='10' >
<option value='1'>127.0.0.1</option>
<option value='2'>127.0.0.5</option>
<option value='3'>127.0.0.10</option>
<option value='4'>127.0.0.15</option>
<option value='5'>127.0.0.20</option>
<option value='6'>127.0.0.25</option>
<option value='7'>127.0.0.30</option>
<option value='8'>127.0.0.35</option>
<option value='9'>127.0.0.40</option>
<option value='10'>127.0.0.45</option>
<option value='11'>127.0.0.50</option>
<option value='12' SELECTED>127.0.0.55</option>
<option value='13' SELECTED>127.0.0.60</option>
</select>
</fieldset><div class="clear"></div>

it should be:
fieldset select.clearheight{
height: auto;
}
You need to chain select and .clearheight
If you need to increase the priority then try this (keep in mind this is bad practice):
fieldset select.clearheight{
height: auto; !important
}
Hope this helps.

changes, you have added space between select .clearheight
/\
fieldset select .clearheight{
height: auto;
}
to
fieldset select.clearheight{
height: auto;
}

Try it,
<fieldset style="width:62%; float:left; margin-left: 19%;height:auto !important">

Use 2 classes and use addClass and removeClass from jquery to toggle them.

Try this:
HTML:
<select class="clearheight" name="searchable[]" id='searchable' multiple='multiple' size='10' >
<option value="1">A</option>
<option value="1">B</option>
<option value="1">C</option>
</select>
</fieldset>
CSS:
fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
fieldset .clearheight{
height: auto;
}
Check this out: http://jsfiddle.net/78Fu4/