CODEWITHSUNDEEP
jquery-mobile
arsenal
arsenal

Reputation: 24174

Populate Drop Down List using jquery mobile from textbox

I have a textbox whose id is other and I want to populate this textbox value into drop down list This is jquery I am using to populate... but this is not working.. And I am working with jquery mobile.. this script works fine with normal jquery but as soon as I works with jquery mobile it doesn't works... Any suggestion will be appreciated...!! I want to do like this:- http://viralpatel.net/blogs/demo/dynamic-combobox-listbox-dropdown-in-javascript.html

    <script>
        function addCombo() {
            var optName = $("#other").attr("value");
            $('#category').append("<option value='"+ optName + "'>" + optName  + "</option>");
            $("#other").attr("value", "");
   $('#category').selectmenu('refresh', true);
        }
    </script>

This is the code of drop down list

<td>Category</td>
                    <td><select class="size" id="category" name="category" width="30px">
                    <option width="30px" value="" selected="selected" >Select</option>
                    <option value="food">Food</option>
                        <option value="rent">Rent</option>
                        <option value="gas">Gas</option>
                        <option value="enter">Entertainment</option>
                        <option value="grocery">Grocery</option>
                        <option value="general">General</option>
                        <option value="other">Other</option></select></td>
                        </tr>
                        <tr>
                        <td>Other</td>
                        <td><input type="text" id="other" name="other"/></td>
                        <td><input type="button" data-role="button" value="Add" onclick="addCombo()"></td>
                        </tr>

Upvotes: 1

Views: 7748

Answers (3)

mc_fish
mc_fish

Reputation: 503

<script type="text/javascript">
$(function(){
    $(".add_button").click(function(){
        $("#-menu").append('<li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-b" data-icon="false" role="option" tabindex="-1" data-theme="b" aria-selected="false"><div class="ui-btn-inner"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">'+$(".what_to_add").val()+'</a></div></div></li>')
    });
});
</script>

this works...it was because of the jquery mobile...if u dont want to pasre input's...set data-role="none"

Upvotes: 1

mc_fish
mc_fish

Reputation: 503

<div>
    <input type="text" class="what_to_add">
    <input type="button" value="add" class="add_button">
    <select class="custom_select">
    </select>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".add_button").click(function(){
        $(".custom_select").append("<option>"+$(".what_to_add").val()+"</option>")
    });
});
</script>

ive just tried the code and it works!

Upvotes: 1

mc_fish
mc_fish

Reputation: 503

in jquery this would be something like this:

<div>
    <input type="text" class="what_to_add">
    <input type="button" value="add" class="add_button">
    <select class="custom_select">
    </select>
</div>

$(".add_button").click(function(){
    $(".custom_select").append("<option>"+$(".what_to_add").val()+"</option>")
});

Upvotes: 0

Related Questions