Set a Material Design Lite select value

Asked

Viewed 19 times

0

I am trying to enter some data in the select of my form, I am using mdl-select

The problem is I’m trying to enter a value but it just doesn’t work.

I would like the value searched in the database to be entered in select. what is wrong?

<!-- Simple Select -->

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="http://creativeit.github.io/getmdl-select/getmdl-select.min.css">

<script defer src="http://creativeit.github.io/getmdl-select/getmdl-select.min.js"></script>


    <div class="mdl-textfield mdl-js-textfield getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample1" readonly>
        <input type="hidden" value="" name="sample1">
        <label for="sample1" class="mdl-textfield__label">Country</label>
        <ul for="sample1" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
                                            
<script>
//Set value
$('#sample1').val('RUS')
</script>

material-design

  • Note that the RUS value disappears by clicking on another part of the screen.

  • I couldn’t understand, it’s working normal.

  • The expected value for RUS is Russia, in addition to the some value of the screen. Analyzing in Chrome Dev Tools you can see that the value tag is empty.

1 answer

1


To preselect an option you need to use the attribute data-selected, you can add it directly to HTML:

<li class="mdl-menu__item" data-val="RUS" data-selected="true">Russia</li>

Or by the jQuery:

$('[data-val="RUS"]').attr('data-selected', true)

Working example:

<!-- Simple Select -->

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="http://creativeit.github.io/getmdl-select/getmdl-select.min.css">

<script defer src="http://creativeit.github.io/getmdl-select/getmdl-select.min.js"></script>


<div class="mdl-textfield mdl-js-textfield getmdl-select">
    <input type="text" value="" class="mdl-textfield__input" id="sample1" readonly>
    <input type="hidden" value="" name="sample1">
    <label for="sample1" class="mdl-textfield__label">Country</label>
    <ul for="sample1" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        <li class="mdl-menu__item" data-val="DEU">Germany</li>
        <li class="mdl-menu__item" data-val="BLR">Belarus</li>
        <li class="mdl-menu__item" data-val="RUS">Russia</li>
    </ul>
</div>
                                            
<script>
  //Set value
  $('#sample1').val('RUS')
  $('[data-val="RUS"]').attr('data-selected', true)
</script>

It is still necessary to keep the line that arrow the value:

$('#sample1').val('RUS')

If not, although visually selected, the input value will be an empty string

Browser other questions tagged material-design

You are not signed in. Login or sign up in order to post.