We Keep Coding

After clicking on dropdown list, options disappeared and result shown

I am trying to create a select dropdown list with multiple options, and after clicking on the option, the selected value should be displayed with expected styling and then the dropdown list will disappear. If clicking on the "X" button of the result box, the result box should disappear and the dropdown list should show again.
I have tried to write my script as following:
JSFiddle
While I am trying to use
if ($(promo).length > 0)
to prove the existence of the selected option, I still got O from console and I am now getting stuck at this point which I can't get the desired result.
Does anyone can share some opinion on it and tell me what to do? Thank you so much for your time to read this question. Regards.

Here is a working fiddle. There are several things to note:
You should use the change event rather than click, so keyboard navigation will appropriately trigger the events as well.
There were several reference errors
There were several typos, wrong selectors in your fiddle. For example, you wrote $("selected-promo") without a period (.), resulting in a by element type selection. $(".selectPromo").css({"display":"none"}); refers to the select element, whose class is actually select-promo, etc. Pay attention to how you name things, and be consistent with names, because this is the perfect recipe for such hard to find, yet trivial bugs. For example, you are mixing camelCase and kebab-case. Pick one and stick to it, and watch out for selector operators, such as . and #.
Your fiddle didn't contain the jQuery reference and its script execution needed to be set to onDomReady.

you're actually not even able to trigger anything when changing your selection in your dropdown. Change it to $("#selectPromo").on("change",function(){ //your code }

I used vanilla JavaScript to write what I think should accomplish what you're trying to do. I didn't see anything regarding styling in your code. I added a few id attributes in your HTML:
function init() {
var selectElement = document.getElementById('selectPromo');
document.getElementById('btnDelete').style.display = 'none';
selectElement.addEventListener('change', function() {
document.getElementById('selectedPromo').innerHTML = selectElement.options[this.value].text;
document.getElementById('inputField').style.display = 'none';
document.getElementById('add-layout').style.display = 'inline';
document.getElementById('btnDelete').style.display = 'inline';
});
document.getElementById('btnDelete').addEventListener('click', function() {
selectElement.value = '';
document.getElementById('inputField').style.display = 'inline';
document.getElementById('add-layout').style.display = 'none';
document.getElementById('selectedPromo').innerHTML = '';
});
}
init();
<div class="coupon-group">
<div class="left">
<div class="input-field" id="inputField">
<div class="title">Select promotion</div>
<div class="select-group">
<select class="select-promo" id="selectPromo">
<option value="">Please choose:</option>
<option value="1" data-name="OfferA">Offer A</option>
<option value="2" data-name="OfferB">Offer B</option>
<option value="3" data-name="OfferC">Offer C</option>
<option value="4" data-name="OfferD">Offer D</option>
</select>
</div>
</div>
</div>
<div class="right"></div>
</div>
<div class="selected-promo" id="selectedPromo"></div>
<div class="hidden-content" id="add-layout">
<div>
<span class="btn-delete" id="btnDelete">X</span>
<span class="name"></span>
<input type="hidden" name="coupon_type[]" value="">
<input type="hidden" name="coupon_value[]" value="">
</div>
</div>

Text box and drop down together

When I click on the Select, its showing up below and to right, but I need the select to hang below input and select. Or is there a custom text box with drop down menu?
I am unable to find one, so I thought about building it my self but the drop down is in wrong location, and I dont see any CSS that can help.
<div>
<input type="text" id="Drop_Down_A" value="Select One..."><!--
--><select id="Drop_Down_A1" style="width: 19px; height: 21px;">
<option value="" disable>Select One...</option>
</select>
</div>
Got the answer I was looking for.
I have posted the new result of what I was after.
<div>
<input type="text" list="Drop_Down_A1" id="Drop_Down_A" value="Select One...">
<datalist id="Drop_Down_A1">
<option value="Select One..." disable>
</datalist>
</div>

I think this plugin can help you https://select2.github.io

I am unsure what you want to achieve with this. Maybe live search? You might want to check this https://silviomoreto.github.io/bootstrap-select/examples/

Unfortunately, there is no way to customise the position of the dropdown in the select box.
However, there are alternatives. I think you are trying to achieve a searchable select box, so here are two solutions:
Use <datalist>. Other than Safari, its support is fairly broad.
Using a library, such as Select2.

Conditional remove/disable/hide select list option based on another select list. All browser support required

HTML
<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="mod">
<option value="Account" selected>Account</option>
<option value="User">User</option>
</select></span>
<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="alert">
<option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
<option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>
So this is existing code that someone else worked on and is no longer a resource.
This little sample just changes the second select list based on the selected item in the first select list. This works just fine in FF and Chrome and after some digging I've been told that one can not hide options in a select list in IE.
I've also read up on this question here but still drawing up short on getting it working for IE. Can anyone advise? Thanks.
jsfiddle

remove instead of hide as shown in the linked post seems to work in IE. Another possible implementation is to empty the option list and add only the options in question:
var alertselect, modselect, orgalerts;
var showAlerts = function (module) {
alertselect.empty().append(
orgalerts.filter(function () {
return $(this).data('params').module === module;
}));
};
Of course for this to work, you have to store the original options:
orgalerts = alertselect.children();
Fiddle

Trouble disabling a text field based on dropdown selection (JavaScript)

I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option from the menu should enable the text field.
I did some research and found many similar problems, however none of the solutions seem to be working. I tried a very simple code on jsfiddle to see if it's the solution itself that's the problem, or my code in particular.. My original code did not work, and neither did the simplified version. Here is the simplified code sample:
HTML:
<select id="menu" onChange="checkOption()">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
</select>
<input type="text" id="input" disabled>
JavaScript:
function checkOption() {
if(document.getElementById("menu").value != "A") {
document.getElementById("input").disable = 'false';
}
else {
document.getElementById("input").disable = 'true';
}
}
The text box remains disabled no matter what I click. I tried removing the default disable, and still no luck. I also tried various other solutions, however this was the most straightforward which is why I don't understand why it's not working.
It's probably something really obvious that I'm not seeing... I'm very very new at this, so if anyone would care to shed some light on my problem, I would be very grateful.

It's disabled not disable
document.getElementById("input").disabled = true;
You can also clean the code up by passing this into your handler and referencing that (also no need for the if, else - just disable based on a condition directly:
<select id="menu" onChange="checkOption(this)">
function checkOption(obj) {
var input = document.getElementById("input");
input.disabled = obj.value == "A";
}
Aaaaand a fiddle: http://jsfiddle.net/23EpC/

Django Dropdown Auto submit

Hee guys. I have a form with a dropdown for all companies. Now i want to display all the people that work for that company when the user changes the value in the company dropdown box without hitting the submit button on the form. Anybody have a good example for that?
tks

No Ajax necessarily needed, since you can just submit the form, and whether you're sing Django or other server-side choices make no difference, just use something like...:
<form name=companiesForm action="whateverurl" method=POST>
<p>
<select name=companySelect size=1 onChange="companiesForm.submit();">
<option value="" SELECTED>Choose A Company
<option value="1">One Company
<option value="2">Another Company
<option value="3">A Third Company
</select>
</p>
</form>

Alex's answer is a good route to go, but here's an alternative. Django and slugs go together rather well. And unobtrusive javascript with jquery is hip at the moment.
Instead of POSTing a value, you could simply navigate to a well-constructed URL. This has the added benefit of making the pages more SEO friendly, letting people bookmark the page, and also avoiding that silly error about POST'ed information when someone clicks the back button.
Note that in either bit of code, Alex's or mine, the navigation will break if javascript is disabled on the client browser. It'd be a good idea to provide some footer links to whatever this combo box does somewhere on the page (the bottom maybe).
(untested, might need some slight tweaks)
<!-- you'll need jquery to make this work -->
<script type="text/javascript">
$(function() {
// navigate to page on click event
$('#nav_combo').bind('change', function() { goToPage(); } );
});
function goToPage() {
var baseUrl = '/your/base/url/';
window.location.href = baseUrl + $('nav_combo').val()
}
</script>
...
<form>
<select id="nav_combo">
<option value="page-1-slug">Page 1</option>
<option value="page-2-slug">Page 2</option>
</select>
</form>
Edit -- By the way, I should have mentioned you could easily use the code above plugged into django's object_detail generic view.