Material selects , event handling unavailable ?

Topic: Material selects , event handling unavailable ?

xavier fiodembo pro asked 7 years ago

How can i bind events on material select ?? e.g onchange. or rather listen to selection changes my current source ; <div class="md-form"> <select id="parentSelect" class="mdb-select colorful-select dropdown-primary" data-bind="event: {onchange: setParentCompany}" > <option selected value="UNK">SELECT MANUFACTURER</option> <option value="BMW">BMW</option> <option value="CHRYSLER">CHRYSLER</option> <option value="FORD">FORD</option> <option value="GM">GM</option> <option value="HONDA">HONDA</option> <option value="HYUNDAI">HYUNDAI</option> <option value="JAGUAR LAND ROVER">JAGUAR LAND ROVER</option> <option value="KIA">KIA</option> <option value="MAZDA">MAZDA</option> <option value="MERCEDES">MERCEDES</option> <option value="MITSUBISHI">MITSUBISHI</option> <option value="NISSAN">NISSAN</option> <option value="SUBARU">SUBARU</option> <option value="TESLA">TESLA</option> <option value="TOYOTA">TOYOTA</option> <option value="VOLKSWAGEN">VOLKSWAGEN</option> </select> <label>Manufacturer</label> </div> looks like on initialize it is injected into a select-wrapper, which adds an input , select list and more with a different unique id. my onchange event never gets hit because that particular select is never interacted with. in summary, after initialize, how can i listen to select "select-options-5c5c3ee2-88ec-b87b-e468-d5e5eb54520c" changes when this id is variable. <div class="select-wrapper mdb-select colorful-select dropdown-primary"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-5c5c3ee2-88ec-b87b-e468-d5e5eb54520c" value="SELECT MANUFACTURER"><ul id="select-options-5c5c3ee2-88ec-b87b-e468-d5e5eb54520c" class="dropdown-content select-dropdown" style="width: 798px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;"><li class=""><span>SELECT MANUFACTURER</span><li class=""><span>BMW</span><li class=""><span>CHRYSLER</span><li class=""><span>FORD</span><li class=""><span>GM</span><li class=""><span>HONDA</span><li class=""><span>HYUNDAI</span><li class=""><span>JAGUAR LAND ROVER</span><li class=""><span>KIA</span><li class=""><span>MAZDA</span><li class=""><span>MERCEDES</span><li class=""><span>MITSUBISHI</span><li class=""><span>NISSAN</span><li class=""><span>SUBARU</span><li class=""><span>TESLA</span><li class=""><span>TOYOTA</span><li class=""><span>VOLKSWAGEN</span><select id="parentSelect" class="mdb-select colorful-select dropdown-primary initialized" data-bind="event: {onchange: setParentCompany}"> <option selected="" value="UNK">SELECT MANUFACTURER</option> <option value="BMW">BMW</option> <option value="CHRYSLER">CHRYSLER</option> <option value="FORD">FORD</option> <option value="GM">GM</option> <option value="HONDA">HONDA</option> <option value="HYUNDAI">HYUNDAI</option> <option value="JAGUAR LAND ROVER">JAGUAR LAND ROVER</option> <option value="KIA">KIA</option> <option value="MAZDA">MAZDA</option> <option value="MERCEDES">MERCEDES</option> <option value="MITSUBISHI">MITSUBISHI</option> <option value="NISSAN">NISSAN</option> <option value="SUBARU">SUBARU</option> <option value="TESLA">TESLA</option> <option value="TOYOTA">TOYOTA</option> <option value="VOLKSWAGEN">VOLKSWAGEN</option> </select></div>

Add comment

dtremblay.grt premium answered 4 years ago

0 0 Best answer

I've managed to handle the onChange event with the "getValue" props. Here is an example :

<MDBSelect
                id={"YOUR_ID"}
                color={"primary"}
                label={"t_SELECT LABEL"}
                options={this.state.options}
                getValue={e => YOURCALLBACKFUNCTION(e)}
            />

Maybe an author of the library could confirm about this?

Konrad Stępień staff commented 4 years ago

Hi @dtremblay.grt,

Yes, you can also use getTextContent

For example:

<MDBSelect 
    options={this.state.options}
    getTextContent={this.handleSelectChange} 
>

More information you can find here in API tab

Best regards, Konrad.

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hello, This piece of script should help you:

$('#parentSelect').on('change', function() {
           console.log('parent Select change'); 
        });

Best, Marta

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

xavier fiodembo

Pro User 0Support score
1Questions 0Answers 0Snippets