Develop Reference

Bootstrap dropdown won't close on choosing an option

I have a dropdown list that has a nice select using bootstrap 3.4.1.
The issue that i have is that: the drop down remain open after select and never close unless i click outside the list.
HTML code:
<div id="countrysd" class="row option-box">
<div class="option-box-header">
<h3 style="color:#164680">Number <span style="color:#C32952">of Users</span> </h3>
<p>Select the users country and move the range slider to set how many users </p>
</div>
<div class="col-md-6 col-sm-6">
<input type="hidden" id="option100Title" name="option100Title" value="Select" />
<input type="hidden" id="option100Price" name="option100Price" value="0" />
<select id="countryList" class="wide price-list" name="countryList" onchange="showChange()">
<option value="">Select</option>
<option value="egypt">Egypt User</option>
<option value="uae">UAE User</option>
<option value="usa">USA User</option>
</select>
</div>
</div>
JavaScript code that casuing the issue
!function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('<span class="current"></span><ul class="list"></ul>'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("<li></li>").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery);
Please let me know if there is a solution for this

My issue was sorted when I removed onchange="showChange()".

CSS+ HTML + JAVA - Add link to language option / combo box

good day. See the code below. I have 4 languages. I want to add a link to each languages, so as to access a new page every time I choose the language from the combo. How can I do this?
<!-- FLAGS -->
<div class="language-picker js-language-picker" data-trigger-class="btn btn--subtle js-tab-focus">
<form action="" class="language-picker__form">
<label for="language-picker-select">Select your language </label>
<select name="language-picker-select" id="language-picker-select">
<option lang="de" value="deutsch">Deutsch</option>
<option lang="en" value="english" selected>English</option>
<option lang="fr" value="francais">Français</option>
<option lang="it" value="italiano">Italiano</option>
</select>
</form>
</div>
<!-- FLAGS -->
For example, I change this line, add a link. But is not working.
<option lang="de" value="deutsch" Deutsch </option>

You can do this with onchange event that will be trigred with each change
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Pick one:</option>
<option value="/de">Deutsch</option>
<option value="/fr">Français</option>
</select>

How to display content depending on dropdown menue user selection

I have a dropdown menu at the bottom of a form with 6 different options.
I need to display different content on a div below this menu depending on which option is selected.
No additional content should be visible until the user is to select one of the options and once the user select one of the options only content associated with that specific option should be visible.
I need to create this functionality using JavaScript but my knowledge of JavaScript is very limited and I don’t seem to find what I need online.
I believe what I need to do is create 6 different divs(one for each option) and toggle
a class that makes them visilble once its respective title is selected.
Here is the dropdown menu that I have:
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
Any help will be greatly appreciated.

I added the divs you mentioned and gave each an id which makes the Javascript a little easier.
Javascript
var ids=["student", "educator", "parent", "not-school", "publisher"];
var dropDown = document.getElementById("roleSel");
dropDown.onchange = function(){
for(var x = 0; x < ids.length; x++){
document.getElementById(ids[x]).style.display="none";
}
document.getElementById(this.value).style.display = "block";
}
HTML
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select id="roleSel" class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<div id="student" class="hidden">Student div</div>
<div id="educator" class="hidden">Educator div</div>
<div id="parent" class="hidden">Student div</div>
<div id="not-school" class="hidden">Not School div</div>
<div id="publisher" class="hidden">Student div</div>
Working Example http://jsfiddle.net/qbzmz/

use the onchange function like so
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" id="selctor" tabindex="50" name="role" onchange="selectChanged();">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<script>
function selectChanged(){
//get the value of selector and act upon it
//i would use jquery to do this stuff
}
</script>

Submitting drop down box input with submit button

I feel bad about asking this but I haven't been able to find the solution on SO or google.
I need to capture the input in multiple drop down boxes on a webpage. I have the page created and I have incorporated a submit button. When I click submit the only information that is submitted comes from the text boxes and clickable buttons.
This code will submit from the button
<div id="selectionButtons"><!-- allows the user to select between veto and issue-->
<input type="radio" name="searchType" value="issue" checked>Issues<br>
<input type="radio" name="searchType" value="veto">Vetos
</div>
This code will also cause the info to be submitted
<div class="listbox" id="orgCode" style="padding-right:10%">
<label for="orgCode">Organization Code</label>
<select size="10" name="org" class="box" style="width:100%;"
multiple="true">
<option selected>Code 1
<option>Code 2
<option>Code 3
<option>Code 4
<option>Code 5
<option>Code 6
</select>
</div>
But this code will not submit the information in the text box
<div class="ui-widget" id="fiscalYear">
<label for="fiscalYear">Fiscal Year</label>
<select id="fisc">
<option value="">Select one...</option>
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
<option value="4">fourth</option>
<option value="5">fifth</option>
<option value="6">sixth</option>
<option value="7">seventh</option>
<option value="8">eight</option>
<option value="9">ninth</option>
<option value="10">tenth</option>
</select>
<script>
$(function() {
$( "#fisc" ).combobox();
$( "#toggle" ).click(function() {
$( "#fisc" ).toggle();
});
});
</script>
At first I thought the problem was my implementation of the jQuery combobox so I went to a plain select option drop down. That didn't solve the problem so I thought that maybe it was being caused by the ending option tag.
Any help would be greatly appreciated, this is my first experience with html and javascript/css

You must give your select tag a name, not just an id
<select id="fisc" name="fisc">

Update text in single textfield with multiple drop down boxes with javascript client side

EDIT: Ok, I really want to get this so I've decided to simplify what I need. I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.
<script type="text/javascript"><!--
function OnSelectionChanged(listBox) {
var textInput = document.getElementById("dn");
textInput.value = listBox.value;
}
//--></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Text</h1>
<div id="intro"><h5>Text</h5>
<div id="content"><h2>Text:</h2>
<p>Text</p>
</div>
<form method="POST" action="submit" name="myForm"><fieldset>
<legend>Text</legend>
<label>[?]
Disposition Code<br />
<select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
<option value="-1" selected>——Select one——</option>
<option value="Text ">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="195">195</option>
<option value="270">270</option>
<option value="300">300</option>
<option value="340">340</option>
<option value="350">350</option>
<option value="370">370</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
</select>
</label>
<label>[?]
Cause Code<br />
<select size="1" name="cause">
<option value="-1" selected>——Select one——</option>
<option value="">Cause - 190</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</label><br /><br />
<label><!--[?] -->
Disposition Narrative
<textarea id="dn" rows="8" cols="30" name="dn"></textarea>
</label>
Im still getting used to how stack overflow wants us to format the code but hopefully you guys can read it well enough to help find a solution. Thanks again.

All I can really give you at this point is
Attach onchange handlers to your drop downs. Your handlers will
add/replace the text.
Use regular expressions to replace text when dd2 and dd3 change.
If you can provide more details about the text you want to replace then someone will be able to help you with your regular expressions.