Clone <select> without the selected option - javascript

I need to clone a select without cloning the selected one and each time i try to clone it ,check previous select and remove selected options !
<select class="form-control name_list" name="idproduit1" id="idproducts1">
<option value="1">piece7</option>
<option value="3">Piece88</option>
<option value="4">Piece6</option>
<option value="5">piece99</option>
<option value="7">Produit 6</option>
Js :
$('#add').click(function(){
i++;
var options = $('[name="idproduit1"] > option ').clone().find('option:selected').remove().end();
$('#dynamic_field').append('<select class="form-control name_list" name="idproduit'+i+'"></select>');
$('[name="idproduit'+i+'"]').append(options);
});

You can still keep your current code (which is not shared on the post as of time of writing) and just add
clonedSelectEl.selectedIndex = 0;
Provided you have set a default placeholder option

Related

How do I add a Checkbox inside Select Option?

I want to create a Checkbox inside the Select Option and it only shows the checkbox in Select All Sites option. How can I implement it?
I am using react-select library for dropdown.
current behaviour:
My code:
https://codesandbox.io/s/proud-water-cvjhgc?file=/src/index.js
Expected output:
Can anyone help me. Thanks
You can use https://www.npmjs.com/package/multi-select-checkbox this library instead of react-select, It has more customization
here is an example from my comment
Basicly . You cannot add a clickable element inside another clickable element How would the browser understand which one is supposed too catch the click, a specific one or all of them ? You can use javascript to add select attribute to all options and use the attribute multiple on select to allow this
And a possible way of doing it
const all = document.querySelectorAll("select option:not(:first-of-type");
let selectAll = document.querySelector("select option:first-of-type");
selectAll.addEventListener("click", function () {
this.style.color="red";
this.style.background="yellow";
for (let i = 0; i < all.length; i++) {
all[i].setAttribute("selected", "selected");
}
});
select{height:14em}
<select multiple name="select">
<option>Select All</option>
<option value="a">Value A</option>
<option value="b">Value B</option>
<option value="c">Value C</option>
<option value="d">Value D</option>
<option value="e">Value E</option>
<option value="f">Value F</option>
<option value="g">Value G</option>
<option value="h">Value H</option>
</select>

Select dropdown option by text if same list of class are found in protractor js

I'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
You can get the desired select element by index:
var desiredImageEditor = $$(".imageeditor select").get(1);
Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:
var desiredOption = desiredImageEditor.$("option.image-package-panel");
desiredImageEditor.click(); // open up dropdown
desiredOption.click();
Or, it should also be possible to just send keys to the select element:
desiredImageEditor.sendKeys("Package");
There is also this convenient abstraction over select and option.

How to save name of select option instead of value

I have this code:
$("#subscription").on('change', function(){
$('#plan').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bank_name" class="form-control input-md chosen-select" id="subscription">
<option value="">Choose Bank</option>
<option value="swiftbank1">bank 1</option>
<option value="swiftbank2">bank 2</option>
</select>
<input type="text" id="plan" class="form-control input-md" name="swift">
What it does is add swift code in to the input field, that works fine!
Problem is that when I add data on database then both values is what I choose example I choose bank 1 then both will be saved as swiftbank1 .
I need it to save bank name (bank 1) and swift (swiftbank1) in database.
I understand that value is what it is but is it possible to add name in database instead of value? In this case this value works to be passed from selection to input.
Thanks
You can use .text for getting selected text.
$("#subscription").on('change', function(){
var text = $("#subscription :selected").text();
var value = $("#subscription").val();
console.log(text); // this will print text
console.log(value); // this will print value
//var plan = $('#plan').val(text); // this will change the value of plan
$("#plan").attr("value",text); // this will add the value attribute
$('#plan').val(text); // this will change the value of plan
$('#subscription :selected').val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="bank_name" class="form-control input-md chosen-select" id="subscription">
<option value="">Choose Bank</option>
<option value="swiftbank1">bank 1</option>
<option value="swiftbank2">bank 2</option>
</select>
<input type="text" id="plan" class="form-control input-md" name="swift">
try this to get text of selected option
$("#subscription").on('change', function(){
$('#plan').val(this.options[this.selectedIndex].text);
});
Since you will need to pass the value to store in database so a quick way is to keep the value as swiftbank1###bank1
Split the string with ### on server end and store them separately like this:
$selectValue = $_POST['select_name'];
$valueArray = explode("####",$selectValue);
$valueArray[0] will have swiftbank1 and $valueArray[1] will have bank1
use this $('#plan').val($('#subscription option:selected').text());

get multiple values from dropdownlist in JavaScript

How can I get the values selected in the drop-down list, using a JavaScript function? User can select multiple values from both the elements. Following are the elements I'm using. Thanks in advance.
<select name="icOptions" id="icOptions" style="display: none" multiple="multiple">
<option value="Choose an Option" selected="selected">Choose a Team </option>
<option value="IDX">IDX</option>
<option value="Support">SUPPORT</option>
<option value="webapps">WEBAPPS</option>
</select>
<select name="ocOptions" id="ocOptions" style="display: none" multiple="multiple">
<option value="Choose an Option" selected="selected">Choose a TeamMember </option>
<option value="sanjay740">sanjay740</option>
<option value="milind740">milind740</option>
</select>
var fld = document.getElementById('icOptions');
var values = [];
for (var i = 0; i < fld.options.length; i++) {
if (fld.options[i].selected) {
values.push(fld.options[i].value);
}
}
// do something with values
Really Awesome Library for your need using jQuery or Prototype
http://harvesthq.github.com/chosen/
Have a look at it.
It supports select & multiselect in a really nice way
An ES6/functional style alternative to the accepted answer:
const values = Array.apply(null, e.target.options)
.filter(option => option.selected)
.map(option => option.value);

jQuery: Get value from multiple fields and show in text field

I have 6 different select boxes and a text field which I need to fetch the value from and combine in to one text field using jQuery.
I understand essentially I will build the value for the targetTextField with a string like this: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);
What do I use to fetch the value of select#options1 and transform that in to opt1?
Would it be along the lines of opt1 = $('select#options1').val(); or am I heading in completely the wrong direction?
I've created a basic jsfiddle with just two options at:
http://jsfiddle.net/e2ScF/2/
jQuery
$(function() {
$("#options").change(function(){
var opt1 = $('select#options').val()
}$('#targetTextField').val(opt1+opt2);
});
$("#options2").change(function(){
var opt2 = $('select#options2').val()
}$('#targetTextField').val(opt1+opt2);
});
});​
HTML
<select id="options">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">​
...but it doesn't appear to be working, so I've obviously misunderstood or missed something.
I made this demo for you, hope it helps
http://jsfiddle.net/e2ScF/5/
$(function() {
$("#options").change(function(){
setTarget() ; // Something has changed so lets rebuild the target
});
$("#options2").change(function(){
setTarget();// Something has changed so lets rebuild the target
});
});
// Just get the values you want and update the target
function setTarget(){
var tmp = $("#options").val();
tmp += $("#options2").val();
$('#targetTextField').val(tmp);
}
​
for dropdown try following
$('select option:selected').text()
have a look at this it should hopefully give you a pointer in what you need to do.
you can change the name to be a class and then just provide your format you want to display in the input. but from your question in presume it should be about that.
If you have different id for select box
var toalopt=$('select option1:selected').text();
toalopt+=$('select option2:selected').text();
toalopt+=$('select option3:selected').text();
toalopt+=$('select option4:selected').text();
toalopt+=$('select option5:selected').text();
toalopt+=$('select option6:selected').text();
document.getElementById('id where you want to club data').innerHTML=toalopt;
If you have same id
$(document).ready(function(){
$('#optionvalue).click(function(){
var values ='';
$('select[name="sameid"]').each(function(index,item){
values +=$(item).val() +' ';
});
$('id where you want to club data').val(values);
});
});
HTml will be normal select tag with id.
First of all, add a class to each of your select elements to better identify them as a group:
<select id="options" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
Then in jQuery, you can use map() to create an array of the values and display them:
$(".auto-updater").change(function() {
var values = $(".auto-updater").map(function() {
return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
// return $(this).val(); // include all values
}).get();
$("#targetTextField").val(values.join(','));
});
Example fiddle
You can see that I've set this up to ignore select elements which are left on their default value. If you uncomment the line beneath it will include all selects, regardless of value chosen.
Minimal code required for you as below:
$(function() {
$("select").change(function(){
var opts=$('option:selected').val();
var oldVal=$('#targetTextField').val();
$('#targetTextField').val(oldVal+opts);
});
});​
Find the jsfiddle demo here.

Categories