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

Answers 1

  • 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));
    

Related Articles