Develop Reference

jQuery Selected Option From Dropdown and display to another label

First of all this question might be noob because i only have basic in JS.
The question is, i already create Category data in Thrust's page which only have 4IR and DEB. Which mean in Thrust DB, it have category_id.
So in this page, when i select Thrust, it should show Category that link with Thrust.
But for this case, when i select Thrust, the Category does not appear. Am i doing something wrong here? Im so lost right now
$("#pilih1").change(function() {
var thrus_id = $(this).val();
var thrusts = #json($thrusts->toArray());
$("#pilih2").html(``);
thrusts.forEach(thrust => {
console.log(thrusts);
if (thrust.thrus_id == thrus_id) {
$("#pilih2").append(`
<option value="` + thrust.id + `">` + thrust.category + `</option>
`);
}
});
});
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="namaStrategy">Strategy Name</label>
<div class="col-sm-10" style="width:30%">
<input class="form-control" type="text" name="namaStrategy" />
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="thrus_id">Thrust</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="thrus_id" id="pilih1">
<option selected disabled hidden>PLEASE CHOOSE</option>
#foreach ($thrusts as $thrust)
<option value="{{ $thrust->id }}">{{ $thrust->namaThrust }}</option>
#endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="">Category</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="category" id="pilih2">
<option selected disabled hidden>PLEASE CHOOSE</option>
<option value="DEB">DEB</option>
<option value="4IR">4IR</option>
</select>
</div>
</div>

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop

You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>

How to replace class name inside div id?

HTML:
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
How to replace col-md-6 with col-md-4 inside div id payment_group by using jQuery? Sorry for my weak English.

Normally, you could simply do this:
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
//Or
$('#payment_group .col-md-6').addClass("col-md-4").removeClass("col-md-6"‌​);
The toggle option is not the best, it will add a class if it does not exist and remove it if it does... It's a bit more concise tough...

<div id="payment_group">
<div class="col-md-6" id="changeclass">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
add one id named="changeclass" for col-md-6 div
then in jquery
$("#changeclass").toggleClass('col-md-4');

You can use $("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
Working demo
$("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
console.log("elements with class col-md-4: " + $("#payment_group .col-md-4").length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>

Use addClass() and removeClass()
$("#payment_group .col-md-6").addClass('col-md-4').removeClass('col-md-6')
.col-md-4 {
color: red
}
.col-md-6 {
color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>

You can set the class regardless of what it was.
$("#payment_group .col-md-6").attr("class", "class-name-you-want-to-assign");

$("#payment_group").find(".col-md-6").addClass("col-md-4");
$("#payment_group").find(".col-md-6").removeClass(".col-md-6");

Try with this one
$( "#payment_group div:first-child" )
$( this ).removeClass( ".col-md-6" );
$( this ).addClass( ".col-md-4" );
});
Thanks

Try this to remove the class
$(selector).removeClass(classname,function(index,currentclass))
And to add
$(selector).addClass(classname,function(index,currentclass))
You can check w3schools site here.
and for add class, check this.

I think this will going to help u as well !
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
});
</script>
</head>
<body>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
<button id="gete">Submit</button>
</body>
</html>

You can use jQuery's addClass and removeClass for this:
$('#payment_group').addClass("col-md-4").removeClass("col-md-6");

In the multiple select dropdowns a selected dropdown value (option) need to hide in remaining dropdowns

I'm creating a web form with 3 select boxes with multiple questions. If I select 1st Question from 1st select drop-down that question will not appear in the 2nd select drop-down. It will repeat same as 3rd select drop-down.
Note: The main purpose is if user select any questions from select drop-down that question will not appear in another select drop-down.
Demo Code:
.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 1</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 2</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 3</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 text-right">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back
</div>
<div class="col-xs-6"><a class="btn btn-primary" role="button" href="Registration-Complete.html" name="btnGlassContactInfo">Register <span class="glyphicon glyphicon-ok"></span></a></div>
</div>
</div>
</div>
</div>
</div>

The first thing you might want to do if change the select elements in your code so that each of them has a unique ID. They are all sel1 at the moment :)
Then you need to bind the onchange event to the select options that will remove the option being selected. Here is an example:
$('select').on('change', function() {
var elem = this;
var option = this.value;
$('.form-control option').each(function() {
if ($(this).html() === option && $(elem).attr('id') !== $(this).parent().attr('id')) {
$(this).remove();
}
});
})
You would probably want to disable the user from using the same selection element, or store the removed options and add them back should the user change his / her mind.
I have disabled them in my example, which you can view here.
https://jsfiddle.net/martiensk/jwfeqrx0/

jQuery Chained Input

I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>

You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle

Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});

You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>

using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>