How can I add paragraph text as select options?

How can I add paragraph text as select options? - javascript

I need to change the first option in the select options and put the first paragraph text inside it, so the first paragraph will be the first option text in the first select element, and the second paragraph to be the first option in the next select element. I know my approach is not at all correct but I tried and couldn't find the right way to do it. Do I need to loop? Or is there another way of doing that? I'm trying using jQuery.
$('.select-container p').each(function(index) {
let textPar = $(this).text();
$('.select-container select option:first-child').each(function(index) {
$(this).text(textPar);
});
});
select {
width: 200px;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="select-container">
<p>First paragraph</p>
<select>
<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>
</select>
</div>
<div class="select-container">
<p>Second paragraph</p>
<select>
<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>
</select>
</div>
</div>

You just need to think through your selectors a bit better. You were updating the text of all select elements, so you need to be more specific. Then, you don't need to loop over one element after selecting it.
$('.select-container p').each(function() {
const par = $(this);
const parText = par.text();
par.next('select').find('option:first-child').text(parText);
});
select {
width: 200px;
padding: 5px 8px;
}
<div class="container">
<div class="select-container">
<p>First paragraph</p>
<select>
<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>
</select>
</div>
<div class="select-container">
<p>Second paragraph</p>
<select>
<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>
</select>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Related

Use jquery drop-down menu to interact with each other

I have an array with five numbers in it
<scipt>
var array = ["1","2","3","4","5"]
</script>
<form>
<select id="num1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
<button type="button">Click Me!</button>
When I click the button, a new drop-down menu is generated
<form>
<select id="num2">
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
Because I have selected 1 value above, the value of 1 has been removed when the second drop-down menu is generated.
<form>
<select id="num1">
<option value="1" selected>1</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
At this time, because id = num1 selects 2 value, so when I change num2 num1, the value will also be changed.
I want to use the front-end to achieve this function, use JQUERY, how do you achieve this?
value will be given through the array.

How to copy option element after a specific option value element

How can I copy the select option element after a specific option value in JavaScript/jQuery?
Here's my two selects
First select where I want to copy the option below the copy value
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Second select where I want to append what I copy on first element
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
</select>

You can target the option element with attribute equal selector, along with .nextAll(), .clone() and .appendTo() to create clone of option element and append in second select dropdown
$('option[value=copy]').nextAll().clone().appendTo('.select2');
$(function(){
$('option[value=copy]').nextAll().clone().appendTo('.select2');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select2">
</select>

First select the first element to copy :
let $copyElement = $('#firstSelect option[value="copy"]').next();
Then, while elements are available, clone them and append them to the second select:
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
let $copyElement = $('#firstSelect option[value="copy"]').next();
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="firstSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select" id="secondSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>

Consider the following example.
$(function() {
function copyOpts(a, b) {
if ($("option:selected", a).val() == "copy") {
$("option:selected", a).nextAll().clone().appendTo(b);
}
}
$(".primary").change(function() {
copyOpts($(".primary"), $(".secondary"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select primary">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select secondary">
<option value="1">1</option>
<option value="2">2</option>
</select>
You can move the if() statement to either the change callback, or leave it in the function.
See more:
https://api.jquery.com/nextAll/
https://api.jquery.com/clone/
https://api.jquery.com/appendTo/

Show/Hide text box based on selection from multiple drop down boxes

I have a table with a row of drop down menus with the values 1 -5. When the user selects a value less than three on any box, I want a pop up box to appear underneath the table. The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the <select id='purpose'>, but it will only work on the first <select>. How do I make it work for all of them?
using this function:
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
Snippet of the HTML:
<td>
<select id='purpose'>
<option value="" selected="selected">Select...</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>
</select>
</td>
<td>
<select id='purpose'>
<option value="" selected="selected">Select...</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>
</select>
...
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
<br/>
</div>

Each select element should be assigned to to the same class rather than the same id. Then, the logic can be applied to all classes.
<td>
<select class="purpose">
<option value="" selected="selected">Select...</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>
</select>
</td>
<td>
<select class="purpose">
<option value="" selected="selected">Select...</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>
</select>
</td>
And the appropriate selector is:
$(document).ready(function(){
$('.purpose').on('change', function() {
if ( this.value < 3) {
$("#business").show();
} else {
$("#business").hide();
}
});
});

First you have duplicate ids which should be removed.
The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the , but it will only work on the first . How do I make it work for all of them?
If you want the change event for work on both the both select you
can just attach on select element. This will trigger the code for all
select elements as below.
$(document).ready(function(){
$('select').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<select >
<option value="" selected="selected">Select...</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>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</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>
</select>
...
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
<br/>
</div>

using jquery 'this' methods

how many parameters are there in jquery for below example how do I have to use this
I have two select box and both of them are same if I change value of my select 1 another select has been chancing too and this is something that should not be that's why I want to prevent this how can I do that ?
$(document).ready(function() {
$(".person-1, .person-2").change(function() {
var val1 = parseInt($('.person-1').find(":selected").text()),
val2 = parseInt($('.person-2').find(":selected").text());
$(".addition-1").text(val1);
$(".addition-2").text(val2);
$(".addition").text(val1 + val2);
});
});
select {
width: 150px;
height: 40px;
}
.personBox {
background: #FFF;
width: 350px;
border: 1px solid #ccc;
padding: 10px;
float: left;
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
<h2>SELECT 1</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
<h2>SELECT 2</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->

you must provide a context which to find the elements not find elements in the document.
$(document).ready(function() {
$(".person-1, .person-2").change(function() {
var context=$(this).closest('div');
var val1 = parseInt($('.person-1',context).find(":selected").text()),
val2 = parseInt($('.person-2',context).find(":selected").text());
$(".addition-1",context).text(val1);
$(".addition-2",context).text(val2);
$(".addition",context).text(val1 + val2);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
<h2>SELECT 1</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
<h2>SELECT 2</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->

how to select multi select option in drop down using jquery

<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes('dLang')">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div class="checkboxes" id="dLang" style="overflow-x: hidden;">
<label for="three"><input type="checkbox" id="three"/>Czech</label>
<label for="three"><input type="checkbox" id="three"/>Danish</label>
<label for="three"><input type="checkbox" id="three"/>Dutch</label>
</div>
</div>
#This code working fine but i want to add scrollbar here.Can any one help?#

Take a look at this snippet. Is this what you need?
.multiSelect {
height: 100px;
overflow: scroll;
overflow-x: hidden;
}
<select class="multiSelect" multiple>
<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>
<option value="8">8</option>
<option value="9">9</option>
</select>
(Hold down CTRL to select multiple elements)

This is you should need to check : http://www.jqueryfaqs.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-using-jQuery.aspx
<script type="text/javascript">
$(function () {
$('[id*=your id name ]').multiselect({
includeSelectAllOption: true
});
});
</script>

We Keep Coding

JavaScript is the programming language of the Web.

How can I add paragraph text as select options? - javascript

Related

Use jquery drop-down menu to interact with each other

How to copy option element after a specific option value element

Show/Hide text box based on selection from multiple drop down boxes

using jquery 'this' methods

how to select multi select option in drop down using jquery

Categories

Resources