Change value of select option using Js without page refresh

Question

So I want to change the select option using javascript but without reloading the page. I am able to change other element data using document.getElementById.value but not the select element

This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.

All other elements of the form could fetch the data with my code. except the select option input element. below is the the code I have used for each element of the form jsfiddle here:http://jsfiddle.net/ZE6BX/11/

document.getElementById("l_type").value = data[1];

data array contains the values of the row against which edit is pressed!

This may help, you might be doing something else wrong since your code looks like it should work. http://stackoverflow.com/questions/78932/how-do-i-programatically-set-the-value-of-a-select-box-element-using-javascript — Rob Schmuecker, Oct 29 '13 at 07:44
Learn AJAX. http://www.w3schools.com/php/php_ajax_database.asp — Akshaya Shanbhogue, Oct 29 '13 at 07:46
I know I can't put php in jsfiddle. that whi I have a sample data inserted — user2529058, Oct 29 '13 at 07:46
I don't see anything like that in your fiddle, are you sure you linked to the right one? It also uses jquery, but you didn't select the jquery framework from the drop-down. — Barmar, Oct 29 '13 at 07:46
Your question title is misleading and the fiddle has errors which are nothing to do with the code outlined in the question. You are not fetching the values correctly with jQuery which is the issue here. Amend your question, explain what you are trying to do, reference the code in the question and we will try and help. — Rob Schmuecker, Oct 29 '13 at 07:50
I have updated my question as well as the jsfiddle link. I have removed unnecessary php code. and added the jquery library. I have also implemented the answer of @Barmar, but still no success. as you can see when u press edit all other data is filled into the form except the select option field. — user2529058, Oct 29 '13 at 07:59
`data[1]` is `VE`, but there is no option with that value. The values are `cu`, `Ve`, and `Ex`, and it's case-sensitive. — Barmar, Oct 29 '13 at 08:02

ran · Answer 1 · 2013-10-29T10:33:37.817

1

u can check whether using index value or option value.

var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
  if(opt[i].value == 'Ve'){
    **opt[i].selected = true;**  }
}

this will help u.

edited Oct 29 '13 at 10:33

answered Oct 29 '13 at 10:28

ran

82
2

Rob Schmuecker · Answer 2 · 2013-10-29T08:39:15.477

This works http://jsfiddle.net/ZE6BX/12/

YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code

HTML:

<div id="l-form">
    <form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
            <h3>Add</h3>

        <label>Name</label>
        <input type="text" class="field" id="l_name" name="l_name" />
        <label>City</label>
        <input type="text" class="field" id="l_city" name="l_city" />
        <label>Phone</label>
        <input type="text" class="field" id="l_phone" name="l_phone" />
        <label>OP</label>
        <div class="cl">&nbsp;</div>
        <input type="text" class="field" id="l_op" name="l_op" />
        <label>Type</label>
        <select class="select_field" id="l_type" name="l_type">
            <option value=" ">Select type</option>
            <option value="cu">Cu</option>
            <option value="Ve">Ve</option>
            <option value="Ex">Ex</option>
        </select>
        <div class="cl">&nbsp;</div>
        <div class="btnp">
            <input type="submit" value="Save" name="submit" id="submit" />
        </div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>View/Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr style:padding-left:10px;>
            <td>sweet_name</td>
            <td>Ve</td>
            <td style="display:none">dream_city</td>
            <td style="display:none">123456</td>
            <td style="display:none">SWAG</td>
            <td>
                <button class="edit_button" value="Edit" name="button">Edit</button>
            </td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
    var data;
    $("#existing").on("click", ".edit_button", function () {
        data = $(this).closest("td").siblings().map(function () {
            return $(this).text();
        }).toArray();

        console.log(data[0]); // name
        console.log(data[1]); //type
        console.log(data[2]); //city
        console.log(data[3]); //phone
        console.log(data[4]); //op

        document.getElementById("l_name").value = data[0];
        $("#l_type").value = data[1];
        document.getElementById("l_city").value = data[2];
        document.getElementById("l_phone").value = data[3];
        document.getElementById("l_op").value = data[4];


    });
});

Why do you need to use `.get(0)`? There's only one matched element, since you're matching by ID. — Barmar, Oct 29 '13 at 08:05

Change value of select option using Js without page refresh

2 Answers2