Trigger() in selects js

Asked

Viewed 83 times

0

I need to create a function that when setting one of the options, the next select also changes to the same value.

how could do this with this structure below?

Obs: value is a hash so it will never be the same, so I put 1 just to simulate.

<select id='opt#1'>
    <option value='1'></option>
    <option value='1'>CSS</option>
    <option value='1'>HTML</option>
    <option value='1'>Javascript</option>
</select>

<select id='opt#2'>
   <option value='1'></option>
    <option value='1'>CSS</option>
    <option value='1'>HTML</option>
    <option value='1'>Javascript</option>
</select> 

Someone would have a light on how to do this with a change something like?

I started something here: http://codepen.io/anon/pen/KdQMNb?editors=101

but ta mocked I was drafting a solution, whoever has some light will help a lot.

1 answer

1


Would that be it? Be careful not to repeat the ids. They should be unique on the page

$(document).ready( function (){
        $('#plan_services_attributes_0_configuration_id').change(function(){
            var itemSelecionado = $(this).find("option:selected").text();
            
            $("#plan_services_attributes_1_configuration_id option").filter(function() {
                return this.text == itemSelecionado; 
            }).attr('selected', true);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="ls-label ">
    <h2 class="ls-title-6">Sistema Operacional</h2>
    <input id="service_default_value_0" type="hidden" name="plan[services_attributes][0][value]" value="1">
    <div class="row">
        <div class="col-md-4 col-lg-4">
            <div class="ls-custom-select">
                <select class="ls-select" id="choice-bits" aria-invalid="false">
                    <option value="#opt0" selected="selected">32 bits</option>
                    <option value="#opt1">64 bits</option>
                </select>
            </div>
        </div>
        <div class="col-md-8 col-lg-8 selects">
            <div class="ls-custom-select" id="opt0">
                <select class="configuration_id ls-select requires-one-tab required" data-target="#service_default_value_0" name="plan[services_attributes][0][configuration_id]" id="plan_services_attributes_0_configuration_id" aria-required="true" aria-invalid="false"><option value=""></option>
                    <option data-default="1" value="26480a2d-d613-4b43-8da3-b8ed31fc7a82">Linux Ubuntu Server 12.04 LTS</option>
                    <option data-default="1" value="2010c4ad-d3fb-4686-a46b-8fcf82456995">Linux Ubuntu 14.04 LTS</option>
                    <option data-default="1" value="cd3794ad-e953-4594-9faf-3291f6cbbbc1">Linux CentOS 5</option>
                    <option data-default="1" value="582cc80b-d9c7-4ca9-8f44-f02d66e6f5c4">Linux CentOS 6</option>
                    <option data-default="1" value="d8cab1d6-ed35-4683-8c44-ecf39dd7acab">Linux Debian 6</option>
                    <option data-default="1" value="15651f65-c29b-4f84-9315-61a1ed2d341d">Linux Debian 7</option></select>
                </div>
                <div class="ls-custom-select" id="opt1">
                    <select class="configuration_id ls-select requires-one-tab required" data-target="#service_default_value_0" name="plan[services_attributes][0][configuration_id]" id="plan_services_attributes_1_configuration_id" aria-required="true" aria-invalid="false"><option value=""></option>
                        <option data-default="1" value="f51a7750-f5e6-4a56-a065-1d383a4eca57">Linux Ubuntu Server 12.04 LTS</option>
                        <option data-default="1" value="78815a7b-54a5-47b6-93a0-9ceb4c011fab">Linux Ubuntu 14.04 LTS</option>
                        <option data-default="1" value="0a14bf58-f76e-4eee-9ab7-778bf2dbf38e">Linux CentOS 6</option>
                        <option data-default="1" value="adb40fe3-6a1b-434d-aff0-40269fc83639">Linux CentOS 7</option>
                        <option data-default="1" value="b1748edb-326e-456f-ba52-8d15be046194">Linux Debian 7 </option>
                        <option data-default="1" value="cbe945bd-e3f0-40cb-880c-f3ea1305b4d3">Linux Debian 8</option>
                        <option data-default="1" value="268fabf6-d00a-460a-a39a-39001c6721dc">Open SUSE 13</option>
                        <option data-default="2" value="55b1b7da-a9ae-412d-ba2d-8afb4a8f49b8">Windows Server 2008 R2 Datacenter Edition</option>
                        <option data-default="2" value="7dc56d14-ea16-4aa4-9c62-f86425b97f48">Windows Server 2012 R2 Datacenter Edition</option></select>
                    </div>
                </div>
            </div>
            
            <small class="">  </small>
        </label>

  • good would be just that ;)

Browser other questions tagged

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