Develop Reference

Array Question related to both HTML and Javascript

I have this simple bit of code. When the user chooses Others, an <input type=text> should appear.
But it only works when there is only one value selected.
Users can randomly add in the same select type, so the code can't be changed. For what I know, in javascript need to use foreach.
So my question is, how to let each of the <input type=text> appear in EACH of the select elements instead of it only appearing in the first one.
function Pack(val){
var element=document.getElementById('otherpack');
if(val=='others')
element.style.display='block';
else
element.style.display='none';
}
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>

Here is my solution:
function Pack(v) {
var inputBox=v.nextSibling;
var selectedValue=v.options[v.selectedIndex].value;
if (selectedValue=="others") {
inputBox.style.display='block';
} else {
inputBox.style.display='none';
}
}
This should be the most stable solution.

I would prefer to make change events into javascript side instead of making it in HTML..
As suggested it is not good to use input inside select so make input outside of select box..
const selectBoxes = document.querySelectorAll('select');
function Pack(select) {
const selectedInput = select.nextElementSibling;
if(select.value === 'others')
selectedInput.style.display='block';
else
selectedInput.style.display='none';
}
selectBoxes.forEach(select => {
select.addEventListener('change', Pack.bind(this, select))
})
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>

id attributes should have unique values, so your selector will always select the first match.
Secondly, input elements are not allowed to be children of select elements. select elements can only have optgroup or option elements as children
It is also best practice to attach listeners via JavaScript code instead of onchange attributes. You can listen at the document level ("event delegation") to avoid repeating several listeners (one per select element).
Here is how it could work:
function Pack(e){
let select = e.target;
if (select.name !== "Type[]") return;
let element = select.nextElementSibling; // this finds the INPUT element
element.style.display = select.value === "others" ? "block" : "none";
}
document.addEventListener("change", Pack);
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>

Have you tried giving them unique ids? if you wanna have the same identifier in different elements, maybe use the class attribute instead.
Hope it helps, good luck !
edit: actually, now I see you're calling them with an id that isn't unique. Give each of the text-inputs their own id and it should work
ids are meant to be unique in the code, so whenever you call your function it assumes that there is only one element with that id

Select others, then show input text in Laravel

<select id="position" class="form-control" name="position" onchange='checkvalue(this.value)'>
<option value="Option A">Gedung A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
<option>Other...</option>
</select>
<input type="text" id="other_text" class="form-control" name="position" placeholder="Enter your location" required style='display:none' />
<script>
function checkvalue(val)
{
if(val==="Other...")
document.getElementById('other_text').style.display='block';
else
document.getElementById('other_text').style.display='none';
}
</script>
Everything works when picking up others, but I get an error when choosing another option. Please help,, i'm newbie in laravel
This is my controller to save to database #Tran Audi
My Controller

Yours:
<select id="position" class="form-control name="position" onchange='checkvalue(this.value)'>
Missing a closing speech mark
<select id="position" class="form-control" name="position" onchange='checkvalue(this.value)'>

How to change attribute min in input field using jquery

I have input field with arrow (up, down). Next to it I have two buttons, + and -. When I click on the input field and then click the arrow the system gets the value from dropdown list. This is ok. But when I click the second one the system doesn't get the value from the dropdown list but he add 1 value. Where is the problem?
$(document).ready(function() {
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Dropdownlist above product name: http://prestashop.suszek.info/pl/summer-dresses/printed-summer-dress

You need to add a event listener to select so that min is updated every time dropdown is selected.
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onChange='group_psoft_onChange()'>
In javacript add the code to change value of min inside function group_psoft_onChange()
$(document).ready(function() {
function group_psoft_onChange(){
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
}
});

As Rohit Agrawal Jquery solution works well, this is a JavaScript version of the answer because you tagged JavaScript.
Shorter version
function dropdownChanged(d){
document.getElementById("quantity_wanted").value = d.value;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onchange="dropdownChanged(this)">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Other option
var d = document.getElementById("group_psoft");
d.addEventListener("change",dropdownChanged);
function dropdownChanged(){
var dropdownValue = d.options[d.selectedIndex].value;
document.getElementById("quantity_wanted").value = dropdownValue;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">

Add attribute to Select Option to pull additional data

I have a select box to which I have a value against the options, I also want another value based on the selection.
My select:
<select class="form-control input-lg" id="credits">
<option value="1" price="2">1 Credit</option>
<option value="10" price="4">10 Credits</option>
<option value="25" price="6">25 Credits</option>
<option value="50" price="8">50 Credits</option>
<option value="100" price="10">100 Credits</option>
<option value="200" price="12">200 Credits</option>
</select>
<button id="top">Apply</button>
My Javascript looking for the value of select:
$(document).on('click', 'button#top', function(e) {
e.preventDefault();
var credits = $('select#credits').val();
var value = $('select#credits').val($('option:selected').data('price'));
});
At the moment all I get on alert() is Object[Object]
Can anyone tell me where I'm going wrong?

val() will only get (or set) the actual value; never price or any other attribute.
And if you're going to use jQuery's data() method, you need to use data-* attributes.
Finally, there's no need to include the tag name (e.g. select) when using an id. ids are unique.
With that in mind:
$(document).on('click', '#top', function(e) {
e.preventDefault();
var credits = $('#credits').val();
// the + makes sure we get a numeric value
var value = + $('#credits option:selected').data('price');
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="form-control input-lg" id="credits">
<option value="1" data-price="2">1 Credit</option>
<option value="10" data-price="4">10 Credits</option>
<option value="25" data-price="6">25 Credits</option>
<option value="50" data-price="8">50 Credits</option>
<option value="100" data-price="10">100 Credits</option>
<option value="200" data-price="12">200 Credits</option>
</select>
<button id="top">Apply</button>

target the selected option using $('select#credits option:selected') and then get the attribute price using .attr('price')
$(document).on('click', 'button#top', function(e) {
e.preventDefault();
var credits = $('select#credits').val();
var value = $('select#credits option:selected').attr('price');
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-lg" id="credits">
<option value="1" price="2">1 Credit</option>
<option value="10" price="4">10 Credits</option>
<option value="25" price="6">25 Credits</option>
<option value="50" price="8">50 Credits</option>
<option value="100" price="10">100 Credits</option>
<option value="200" price="12">200 Credits</option>
</select>
<button id="top">Apply</button>

Filter the dropdown using jquery

I have a drop down which lists several countries and I want to display only a few countries depending on some conditions.
jquery is as below:
function form_onLoad() {
var countries = "";
if(document.forms[0].countries_new) {
countries = document.forms[0].countries_new.value;
}
}
Dropdown :
<select name="country" size="1">
<option value=""></option>
<option value="1" >Afghanistan</option>
<option value="2" >Albania</option>
<option value="3" >Algeria</option>
<option value="4" >Andorra</option>
<option value="5" >Angola</option>
<option value="6" >Antigua & Deps</option>
<option value="7" >Argentina</option>
<option value="8" >Armenia</option>
<option value="9" >Australia</option>
<option value="10" >Austria</option>
<option value="11" >Azerbaijan</option>
<option value="12" >Bahamas</option>
</select>
Inside the jquery, I want to replace the existing dropdown(above) which has all countries with the countries variable which has only a few options.

You can use JQuery library to achieve it
$('select[name="country"]').find('option').each(function(){
if($(this).text()=='Armenia' || $(this).attr('value')=='12'){
$(this).remove(); //It will remove Armenia and Bahamas
}
});