We Keep Coding

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

javascript variable calling not working on this following code

Those following code isnot working...
Firstly i want these selected value (by sentvalue() and receivevalue())
and then want to use those selected value on another(sent()) function ..
this is html code--
<select class="form-control" id="sents" onchange="sentvalue(this) " >
<option value="0" >-- Select One --</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>
<select class="form-control" id="receives" onchange=" receivevalue(this); counter2(this); " >
<option value="0">-- Select One --</option>
<option value="1" onclick="i();">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>
<input type="number" id="sent2" onkeyup="sent()" class="form-control" name="number">
<p class="form-control" id="receive2" type="number" name="number" disabled>
i want to use receivevalue() and sentvalue() on sent() function but it does not work...
var x,y;
function receivevalue(selv) {
var y = selv.options[selv.selectedIndex].value;}
function sentvalue(selv) {
var x= selv.options[selv.selectedIndex].value;
}
function sent(){
receivevalue();
gett=y;
sentvalue();
putt=x;
if(gett==1 && putt==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
i want sentvalue() variable x and receivevalue() variable y on sent() function . please solve my problem..

function sent(){
rselv = document.getElementById('receives');
receivevalue(rselv);
get=y;
sselv = document.getElementById('sents')
sentvalue(sselv);
put=x;
if(get==1 && put==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}

First of all there is typo in sentevalue. It should be sentvalue.
Then your x, y variables are global. You shouldn't re-declare them inside function.
var x,y;
function receivevalue(selv) {
y = selv.options[selv.selectedIndex].value;
}
function sentvalue(selv) {
x = selv.options[selv.selectedIndex].value;
}
Now since you have values x and y in global variables, sent function can simply be written like this.
function sent(){
if(x==1 && y==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
And Correct HTML is:
<select class="form-control" id="sents" onchange="sentvalue(this)">
<option value="0" >-- Select One --</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>
<select class="form-control" id="receives" onchange="receivevalue(this); counter2(this);">
<option value="0">-- Select One --</option>
<option value="1" onclick="i();">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>
<input type="number" id="sent2" onkeyup="sent()" class="form-control" name="number">
<p class="form-control" id="receive2" type="number" name="number" disabled>

How display listbox option based on a variable value using jquery?

I have a select box with options now I want to show only those options which value id is greater than the user input value.
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something</option>
<option value="14" hidden>Something</option>
<option value="20" hidden>Something</option>
</select>
this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.

You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>

You cn try this:
$(document).ready(function(){
$("#txtUserInput").keyup(function(){
getUserInput(this);
});
});
function getUserInput(_this){
var userInput=parseInt($.trim($(_this).val()));
if(userInput!=null && userInput != isNaN){
$("#dtime option").each(function(){
var option=parseInt($.trim($(this).val()));
if(option!=0 && option<userInput){
$(this).css("display","none");
}
else{
$(this).css("display","block");
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>
<input id="inputData" value="0">
</html>
here is jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});

List item and statement html javascript

I have a html code (a list item), and it works fine, when you click it, it drops down the list item, here is the code:
<div class="list-item"> <strong class="table-cell">Choose:</strong> <span class="table-cell right">
<!-- <input type="text" name="numberofchildren" id="numberofchildren" value=""> -->
<select name="numberofchildren" id="numberofchildren" value="numberofchildren" >
<option value="Blood Group" selected disabled>NO CHILDREN</option>
<option value="No Children" >No Children</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>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
</span> </div>
But my question is this, how can I add a javascript code, that when a user chooses, for example "1" ( if he chose == "1" {...}, how can I do that.
Hope that I was clear, thank you very much for your time and effort.

function myfunction(select) {
if (select.value == "1") {
alert("You selected ONE");
} else {
alert("You selected: " + select.value);
}
}
<select name="numberofchildren" id="numberofchildren"
value="numberofchildren" onchange="myfunction(this)">
<option value="">Please select value...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

onchange select box

Say we have 2 different select boxes with the same number of options:
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="3" >3</option>
<option value="4" >4</option>
</select>
Is it possible when we select the first box to select the same option number in the second box automatically? Without jQuery if possible.
UPDATE: the values of 2 boxes are different! When we select the first value of box1 the box 2's value will automatically would be 3! and so on...

Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.
<select id="box1" onChange="changeBox2(this.selectedIndex);">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
W3 Schools JavaScript Events
Example on Accessing SELECT properties in JS

The following JS would work:
document.getElementById("box1").onchange = function(){
document.getElementById("box2").value = this.value;
};
Not the most elegant code I've written but gets you what you need. Fiddle: http://jsfiddle.net/XZRKS/

A javascript snippet code:
var box1=document.getElementById("box1");
box1.onchange=function (){
document.getElementById("box2").value=box1.value;
}

Hope below is what you want...
<html>
<body>
<select id="box1" onChange="box2.value=box1.value">
<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>
<select id="box2" onChange="box1.value=box2.value">
<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>
</body>
</html>

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("change", function(e){
var val = parseInt(this.value);
box2.querySelector("option:nth-child("+val+")").selected = true;
}, false);
This will only work in Gecko/Mozilla only
For IE use onChange instead of change and attachEvent instead of addEventListener, for more info visit
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
for information on querySelector see this link
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

$("#box1").on('change',function(){
document.getElementById("box2").value = this.value;
console.log($("#box2").val());
});
$("#box2").on('change',function(){
document.getElementById("box1").value = this.value;
});
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

yes it's simple in javascript. just one line.
function ch(){
document.getElementById("box2").value = document.getElementById("box1").value ;
}
you can call ch() on onchange event of box2