We Keep Coding

setting value of an input with jQuery doesn't work

I'm trying to set the value of a dropdown list based on another dropdown list value inside Angular and using jQuery, it works and it auto selects the wanted value but it doesn't add the value to the database after submitting. I'm sure everything is fine concerning the database connection because choosing any other selected value (for example euro in this case) is added to database.
$(document).ready(function() {
$("#country").change(function() {
var val = $(this).val();
if (val == "usa") {
$("#currency").val("dollar");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form (ngSubmit)="onSubmit()">
<select id="country" name="country">
<option value="usa">usa</option>
<option value="france">france</option>
</select>
<select id="currency" name="currency">
<option value="dollar">dollar</option>
<option value="euro">euro</option>
</select>
<button type="submit" class="btn btn-primary">submit </button>
</form>
NB: Dollar becomes selected but when submitting it's not added to database, whereas if I remove the jQuery function and choose manually the currency , it adds to the database and everything is fine .

The jQuery code seems to be good... but my question is, why are you using jQuery to update a form in Angular.
Did you evaluate use tempalte-driven or reactive forms instead? Below you can find your form written as template driven.
<form (ngSubmit)="onSubmit()">
<select id="country" name="country" (change)="onCountryChange()" [(ngModel)]="selectedCountry">
<option
*ngFor="let country of countries"
[value]="country">
{{ country }}
</option>
</select>
<select id="currency" name="currency" [(ngModel)]="selectedCurrency">
<option
*ngFor="let currency of currencies"
[value]="currency">
{{ currency }}
</option>
</select>
<button type="submit" class="btn btn-primary">submit </button>
</form>
And in this plunkr you can find the full example using template-driven form... but if I where you, I would go for the reactive form approach.

Selected value is not added to the existing text inside text area when a user type inside of it

I have a drop list where the nurse choose from, a diagnostic, and then this diagnostic is added into a textarea where the nurse will add more details near it. Then, they can add more diagnostics into the same textarea and add more info near this diagnostic.
Whenever the nurse selecting diagnostics, they are adding normally, but the moment she types in the textarea near the diagnostic added, and went to add another one, nothing is added.
Here is the jQuery script for the process:
$("#medication_id").on('change', function(){
$("#medication_pill").text($("#medication_pill").text() + " + " + $("#medication_id option:selected").text());
});

Change your code to use $("#medication_pill").val(). This will work for you:
$("#medication_id").on('change', function(){
$("#medication_pill").val($("#medication_pill").val() + " + " + $("#medication_id option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='medication_id'>
<option>Medication 1</option>
<option>Medication 2</option>
<option>Medication 3</option>
</select>
<textarea id="medication_pill"></textarea>
The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

It is hard to debug without html code. So please always remember that when you ask a question you should add enough code so that the problem was reproducable.
This code has a few things that should be changed
First of all avoid using $(selector) more than it is necessary (it is memory consuming). If you want to perform a couple of operations like in your case on an element $("#medication_pill") just save it to a variable.
Secondly on html form elements it is better to use val() function instead of text(). Here is why
Lastly in an change event you do not have to do make jQuery call to the select element ($("#medication_id option:selected")) since this event is bounded to this element. Instead you can just use $(this).
Here is an working example with desired functionality.
$("#medication_id").on('change', function() {
var textarea = $("#medication_pill");
textarea.val($("#medication_pill").val() + " + " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="medication_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<textarea id="medication_pill"></textarea>
And here is an example with clearing select after change so that you can select tha same option couple of times in a row.
var select = $("#medication_id");
var textarea = $("#medication_pill");
select.on('change', function() {
textarea.val($("#medication_pill").val() + " + " + select.val());
select.val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="medication_id">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<textarea id="medication_pill"></textarea>

jQuery to serialize selected option's value, not label

I have a select control:
<select name="AdditionalCategory">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>
I then use jQuery to send AJAX request, serializing the form:
$.post("../../d/up.php",$("#main").serialize(),
function(data){
But, if I choose Category 1 for example, the serialize() function serializes the label, not the value of the option. So the request would be up.php/?AdditionalCategory=Category 1
Is there a way to tell the function to send the value, like this:
up.php/?AdditionalCategory=1

It should work fine but there is a slight error in your HTML form which is the closing tag of <option> you have is </value> which shoule be </option> instead.
Check working code below:
$(function() {
$("#but").click(function() {
console.log($("#main").serialize());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main">
<select name="AdditionalCategory">
<option value="1" selected>Category 1</option>
<option value="2">Category 2</option>
</select>
</form>
<button id="but">Click me</button>

Getting JS Script to work with multiple select drop down

I found two threads which answer my question of what code to use. However I have been searching here and the rest of the internet for something to demonstrate how to get the script to run. I have almost no experience with JavaScript which is probably why I can't get this.
Threads:
How to avoid the need for ctrl-click in a multi-select box using Javascript?
Selecting multiple from an html select element without using ctrl key
The code that I wish to use is
<script>
$(document).ready(function(){
$('select').mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select).focus();
});
$('select').mousemove(function(e){
e.preventDefault();
});
});
</script>
However I have no idea on how to get it to work with a multiple select dropdown menu. The example drop down that I have been using to try and figure out how to get this to work is:
<form id="AddProductForm" name="AddProductForm" method="POST">
<select id = "practice" name="practice" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
I don't understand how to get the script to run so that when I click on one of the options I don't need to hold ctrl down to select multiple.
Any help will much appreciated. Thanks!!
EDIT:
I have been looking at the two links and I have a page with the code on it but when I run it I still have to hold ctrl to be able to select multiple options.

The javascript code must be AFTER the select tag. Copy-paste next code in a HTML file and open it in your browser:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<select id="practice" name="practice" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script type = "text/javascript">
$(document).ready(function(){
$('select').mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select).focus();
});
$('select').mousemove(function(e){
e.preventDefault();
});
});
</script>
</body>
</html>

javascript functions arguments

Have created a basic form, three drop down lists and a button. im tryn to multiply the three values in the down lists. i have to pass the data up to the function. i have ran the code just keep getting 0 as the result?? I don't think I'm passing the data from from up to the function correctly?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
function multiply(number1, number2, number3)
{
var firstnum=0;
var secondnum=0;
var thirdnum=0;
var answer;
firstnum=parseInt(number1);
secondnum=parseInt(number2);
thirdnum==parseInt(number3);
answer=(firstnum*secondnum*thirdnum);
alert(answer)
}
</script>
<form name="Example1">
Number 1:
<select id="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/>
Number 2:
<select id="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/>
Number 2:
<select id="num3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br/>
<input type=button value="muliply" onclick="multiply(num1.value, num2.value, num3.value)" />
</form>
</body>
</html>

Your problem is:
thirdnum==parseInt(number3); is a comparison, not an assignment, so thirdnum will always be 0.
Since you are multiplying by thirdnum, and anything × 0 is 0, you will always get 0 as the output.
Change == to =.
This would have been picked up if you had QAed your code with JS Hint.
Your bad practises which you should fix are:
num1.value assumes global JS variables will be created for every element with an id. Don't assume that, use document.getElementById
parseInt(number1) doesn't have a radix. Always specify the number system you are using (normally base 10) so it isn't inferred from the data for unexpected results: parseInt(number1, 10);
<form name="Example1">, the name attribute on forms is a legacy from before the id attribute had come around properly. Use id to identify elements for client side code.
onclick attributes do a poor job of separating concerns. Use addEventListener (or a library such as YUI or jQuery if you need to support old versions of IE).

OK u keep getting 0 as result because of this
thirdnum==parseInt(number3);
in your multiply function
Change it to
thirdnum=parseInt(number3);
And you should be good to go
Here is a demo