We Keep Coding

javascript pick values (or indexes) for multiple drop menu SELECTs iDs, and make them remove 'disable' from input fields that they are connected to

<div id="header_div">
<select id="store_name_select" name="store_name_select" onchange="checkEnable(this,'store_name')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p>
<input disabled="" id="store_name" name="store_name" type="text">
</p>
<div>
<div>
<select id="store_address_select" name="store_address_select" onchange="checkEnable(this,'store_address')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<p>
<input disabled="" id="store_address" name="store_address" type="text">
</p>
<select id="purchase_date_select" name="purchase_date_select" onchange="checkEnable(this,'purchase_date_month', 'purchase_date_day', 'purchase_date_year')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p>
<input disabled="" id="purchase_date_month" name="purchase_date_month" type="text"></span>
<input disabled="" id="purchase_date_day" name="purchase_date_day" type="text"></span>
<input disabled="" id="purchase_date_year" name="purchase_date_year" type="text">
</p>
</div>
Note 1: I do NOT own the site with this code so I can't change the page source code by editing it.
Note 2: I need a javascript (NOT JQuery)
Note 3: I'm accessing the website in question through Firefox or Waterfox web browser
I'm trying to make a greasemonkey (tampermonkey) script, which will do some things when browser access the web page.
The above code is just a small piece of page source code. I made it more simple so you can only see whats important for this issue.
As you can see, page has multiple 'select' (tags). Current 'state' (or value) is 'not picked'. For all 'select' tags I can select from drop menu 'yes' or 'no'. Once I select 'yes', it will 'unlock' the input fields that were previously 'disabled'.
Since most of the time the answer for 'select' is 'yes', I want to have a script which will automaticly select 'yes' for all 'selects' IDs, and 'unlock' (remove 'disable' state) for the 'inputs' that they are connected to. If I later need to switch from 'yes' to 'no' I'll do it manually.
I googled and searched before asking here, and although I did found some similar questions, NONE of the code worked, even if I tried to adopt it or change it to work for my case. I'm a newb so probably I missed something or coded it the wrong way, so please try not to criticize me too much. :)
For instance, I've tried this:
document.getElementsByTagName("select").selectedIndex = 1; //Option 'yes'
or
var test = document.querySelectorAll("#store_name_select, #store_address_select, #purchase_date_select");
for (var i = 0; i < test.options.length; i++) {
test.selectedIndex = 1;
}
^ that one also didn't work. At the top of that, (tampermonkey internal) script editor also warned me that 'i' is already defined. It's because I already used 'i' for other piece of code which does other things. Almost all the code that I can find ALL include 'i' letter. I wonder if I could use other letter for that line, eg.:
for (var b = 0; b < test.options.length; b++)
^ I did tried that line too but nothing has changed.
So, does anyone know how to get all 'select' IDs and force them to all select 'yes' (by value or by their 'index') and unlock input fields that are bound to them? Since this is a submit form, the owner needs to know that I selected 'yes' from drop menu. So the point is not only for the drop menu 'select' to unlock inputs, but to let the site owner 'know' that I actually did selected 'yes' before inputs removed their 'grayed out' cover.
THANK YOU in advance for your help!
If you need a 'test' page, here is the direct link to the page in question, so you can try your code and see if it really works:
amzon microworkers page

There isn't any selector to select multiple IDs at once. You have to write you code to get those elements.
Please see the getElementsById() function in this demo
The function accepts string of multiple ids separated by blank space and returns the corresponding elements for it.
I referred this answer

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>

IE, ng-repeat for select cutting text or showing {{}}

Basic Problem
I have a multi-select (list) that depending on how I write the html/angular has a bug. In the first case the last 3 characters are cut off from the rendering. In the second case the name is not visible but instead the {{}} placeholder until the item is clicked.
I'd simply like a way for me to display the elements in a correct fashion without bugs.
Finally, this behavior seems to happen if an element is added to the categories array after the page and select has rendered.
With ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}" ng-bind="cat.name"></option>
</select>
Without ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}">{{cat.name}}</option>
</select>
With ng-options
With ng-options everything appears but I am unable to actually click on the elements to select them - they are frozen.
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
ng-options="cat.name for cat in categories track by cat.id" >
</select>
Since no-one wrote an answer, see my own work-around as the accepted answer.

My own workaround
It seems the problem was with adding an item to the categories array after the initial rendering has taken place. There we two workarounds I found:
Add all elements to the array only once without adding again OR
Hide the dom select element utilizing ng-if for 100ms and make it visible again. This forces the browser to re-render the elemnents and renders them correctly.
In HTML (wrapping the select):
<div ng-if="categories!=undefined && categoriesLoaded">
...Select code here...
</div>
In the controller (Javascript):
$scope.categoriesLoaded = false;
//Trigger render
$timeout(function(){ $scope.categoriesLoaded = true;}, 0);

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

Give textfield a value based on option selected from drop down

What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.

example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example

HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/