CODEWITHSUNDEEP
javascriptjquerysplithtml-select
Hermes Djohar
Hermes Djohar

Reputation: 121

How to get specific value of html select element with jQuery

so... I'm having a hard time to figure out how to solve this javascript thing.

So, I've been working on register form where user input their student ID, and the ajax will response to select their degree (let's just say so), automatically.

There's 4 degree, which has 3 digit of primary code, as given below by variable si, ti, dsi, and dti.

var si   = ['510'] // Selain 510
var ti   = ['520'] // Selain 520

var dsi = ['310'] // Selain 310
var dti = ['320'] // Selain 320

if(si.indexOf($(this).val().substr(0,3)) < 0){
    $('#dftrprodi option[value="S1 - Teknik Informatika"]').attr("selected", "selected");
}
else if (ti.indexOf($(this).val().substr(0,3)) < 0){
    $('#dftrprodi option[value="S1 - Sistem Informasi"]').attr("selected", "selected");
}
else if (dti.indexOf($(this).val().substr(0,3)) < 0){
    $('#dftrprodi option[value="D3 - Teknik Informatika"]').attr("selected", "selected");
}

3 Digit codes of 510 and 520 working out well, selecting the right grade. But at the third 'else if', it select degree 'S1 - Teknik Informatika' instead of 'D3 - Teknik Informatika'

How to solve it? Well, I thought '310' will be same as '510' and will selecting D3 instead of S1, but it's not.

Here's my view, if needed

<select id="dftrprodi" name="studi">
   <option value="S1 - Sistem Informasi">S1 - Sistem Informasi</option>
   <option value="S1 - Teknik Informatika">S1 - Teknik Informatika</option>
   <option value="D3 - Sistem Informasi">D3 - Sistem Informasi</option>
   <option value="D3 - Teknik Informatika">D3 - Teknik Informatika</option>
</select>

Example (to put it simple):

If
   user/student type "510-xxxxx" it select 'S1 - Sistem Informasi'
else if 
   user/student type "520-xxxxx" it select 'S1 - Teknik'
else if
   user/student type "310-xxxxx" it select 'D3 - SI (for short)'
else if
   user/student type "320-xxxxx" it select 'D3 - TI'

EDIT: I have deleted, the disabled input, because when disabled, the value will not sent to the database

Upvotes: 0

Views: 228

Answers (2)

Glia
Glia

Reputation: 381

Your code works for the firts two cases "by accident". I assume that $(this).val().substr(0,3) evaluates to one of the values 510, 520, 310, 320. Now, what your code does:

if(si.indexOf($(this).val().substr(0,3)) < 0)

Here you are checking, if the value is not 510, because indexOf(...) < 0 means not found. Next thing is, that you check for one value (e.g. 510) but set another one (e.g. "S1 - Teknik Informatika" which corresponds to 520).

So what you are doing in your code is basically the following (in pseudocode):

if (510 is not the selected value)
  then select 520
else if (520 is not the selected value)
  then select 510
else if (320 is not the seleted value)
  then select 320

And here a solution:

var courses = {
  '510': 'S1 - Sistem Informasi',
  '520': 'S1 - Teknik Informatika',
  '310': 'D3 - Sistem Informasi',
  '320': 'D3 - Teknik Informatika'
};
var courseId = $(this).val().substr(0,3);
var course =  courses[courseId];
$('#dftrprodi').val(course);
// or alternatively
$('#dftrprodi option[value="' + course + '"]').prop("selected", true);
// or
$('#dftrprodi option[value="' + course + '"]').attr("selected", "selected");

If you can change the view so that the value of each option contains the courseId, you could make it even simpler:

<select id="dftrprodi" name="studi">
   <option value="510">S1 - Sistem Informasi</option>
   <option value="520">S1 - Teknik Informatika</option>
   <option value="310">D3 - Sistem Informasi</option>
   <option value="320">D3 - Teknik Informatika</option>
</select>

$('#dftrprodi').val($(this).val().substr(0,3));

Upvotes: 0

Jaromanda X
Jaromanda X

Reputation: 1

The logic is broken

consider if the $(this).val().substr(0,3) is 310

this makes the first "if" true - the else ifs wont ever run

Here's what I think may work

var courses = {
    '510': 'S1 - Sistem Informasi',
    '520': 'S1 - Teknik Informatika',
    '310': 'D3 - Sistem Informasi',
    '320': 'D3 - Teknik Informatika'
};
$('#dftrprodi option[value="' + courses[$(this).val().substr(0,3)] + '"]').attr("selected", "selected");

Upvotes: 1

Related Questions