javascript - Title not hiding when change dropdown -


i got stuck when change role job roles engineering table not in engineering class hide, when choose analyst role, title in table analyst not showing instead engineering title show when change each dropdown.

$("select.filterby").change(function() {    var filters = $.map($("select.filterby").toarray(), function(e) {  	return $(e).val();    }).join(".");    var engineering = $("div#filtercontainer").find("h3, .third-title, .engineering, tr").hide();    var analyst = $("div#filtercontainer").find("h3, .third-title, .analyst, tr").hide();      if (analyst) {  	$("div#filtercontainer").find("h3.third-title.engineering, tr." + filters).show();    } else if (engineering) {  	$("div#filtercontainer").find("h3.third-title.analyst, tr." + filters).show();    }  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <div id="filtercontainer" class="container">      <h3 class="third-title engineering">engineering</h3>      <div class="row">        <div class="col-md-12 col-sm-12 col-xs-12">          <div class="">            <table class="table">              <tr class="all engineering technology full_time jakarta">                <td style="width: 300px;"><a href="fe-dev.html">front end developer</a></td>                <td>technology</td>                <td>full time</td>                <td>jakarta</td>              </tr>              <tr class="all engineering technology intern jakarta">                <td style="width: 300px;"><a href="fe-in-dev.html">front end developer</a></td>                <td>technology</td>                <td>intern</td>                <td>jakarta</td>              </tr>              <tr class="all engineering technology full_time jakarta">                <td style="width: 300px;"><a href="wp-dev.html">wordpress developer</a></td>                <td>technology</td>                <td>full time</td>                <td>jakarta</td>              </tr>              <tr class="all engineering technology full_time jakarta">                <td style="width: 300px;"><a href="ad-dev.html">android developer</a></td>                <td>technology</td>                <td>full time</td>                <td>jakarta</td>              </tr>              <tr class="all engineering technology full_time jakarta">                <td style="width: 300px;"><a href="ios-dev.html">ios developer</a></td>                <td>technology</td>                <td>full time</td>                <td>jakarta</td>              </tr>              <tr class="all engineering technology full_time jakarta">                <td style="width: 300px;"><a href="be-dev.html">back end developer</a></td>                <td>technology</td>                <td>full time</td>                <td>jakarta</td>              </tr>              <tr class="all engineering technology intern jakarta">                <td style="width: 300px;"><a href="be-in-dev.html">back end developer</a></td>                <td>technology</td>                <td>intern</td>                <td>jakarta</td>              </tr>            </table>          </div>        </div>      </div>      <h3 class="third-title analyst">analyst</h3>      <div class="row">        <div class="col-md-12 col-sm-12 col-xs-12">          <div class="">            <table class="table">              <tr class="all analyst technology full_time jakarta">                <td style="width: 300px;"><a href="sa.html">system analyst</a></td>                <td>technology</td>                <td>full time</td>                <td>jakarta</td>              </tr>              <tr class="all analyst technology intern jakarta">                <td style="width: 300px;"><a href="sa-in.html">system analyst</a></td>                <td>technology</td>                <td>intern</td>                <td>jakarta</td>              </tr>            </table>          </div>        </div>      </div>    </div>

i had try create if else if condition declare analyst , engineering parameter hide title of each section analyst , engineering.

updated.

<select class="form-control filterby">   <option value="all">all roles</option>   <option value="accounting">accounting</option>   <option value="administrative">administrative</option>   <option value="analyst">analyst</option>   <option value="engineering">engineering</option>   <option value="product">product</option>   <option value="marketing_sales">marketing , sales</option> </select>

here updated code. try , check: 

$("select.filterby").change(function() {    $("div#filtercontainer").find("h3,tr").hide();    $("div#filtercontainer").find("h3." + $(this).val() + ",tr." + $(this).val()).show();        $("#no-result-container").hide();    if($("div#filtercontainer").find("h3." + $(this).val() + ",tr." + $(this).val()).length == 0) {      $("#no-result-container").show();    }  });
#no-result-container {    display: none;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select class="form-control filterby">    <option value="all">all roles</option>    <option value="accounting">accounting</option>    <option value="administrative">administrative</option>    <option value="analyst">analyst</option>    <option value="engineering">engineering</option>    <option value="product">product</option>    <option value="marketing_sales">marketing , sales</option>  </select>  <div id="filtercontainer" class="container">    <div id="no-result-container" class="container"> no search parameter in here.</div>    <h3 class="third-title engineering">engineering</h3>    <div class="row">      <div class="col-md-12 col-sm-12 col-xs-12">        <div class="">          <table class="table">            <tr class="all engineering technology full_time jakarta">              <td style="width: 300px;"><a href="fe-dev.html">front end developer</a></td>              <td>technology</td>              <td>full time</td>              <td>jakarta</td>            </tr>            <tr class="all engineering technology intern jakarta">              <td style="width: 300px;"><a href="fe-in-dev.html">front end developer</a></td>              <td>technology</td>              <td>intern</td>              <td>jakarta</td>            </tr>            <tr class="all engineering technology full_time jakarta">              <td style="width: 300px;"><a href="wp-dev.html">wordpress developer</a></td>              <td>technology</td>              <td>full time</td>              <td>jakarta</td>            </tr>            <tr class="all engineering technology full_time jakarta">              <td style="width: 300px;"><a href="ad-dev.html">android developer</a></td>              <td>technology</td>              <td>full time</td>              <td>jakarta</td>            </tr>            <tr class="all engineering technology full_time jakarta">              <td style="width: 300px;"><a href="ios-dev.html">ios developer</a></td>              <td>technology</td>              <td>full time</td>              <td>jakarta</td>            </tr>            <tr class="all engineering technology full_time jakarta">              <td style="width: 300px;"><a href="be-dev.html">back end developer</a></td>              <td>technology</td>              <td>full time</td>              <td>jakarta</td>            </tr>            <tr class="all engineering technology intern jakarta">              <td style="width: 300px;"><a href="be-in-dev.html">back end developer</a></td>              <td>technology</td>              <td>intern</td>              <td>jakarta</td>            </tr>          </table>        </div>      </div>    </div>    <h3 class="third-title analyst">analyst</h3>    <div class="row">      <div class="col-md-12 col-sm-12 col-xs-12">        <div class="">          <table class="table">            <tr class="all analyst technology full_time jakarta">              <td style="width: 300px;"><a href="sa.html">system analyst</a></td>              <td>technology</td>              <td>full time</td>              <td>jakarta</td>            </tr>            <tr class="all analyst technology intern jakarta">              <td style="width: 300px;"><a href="sa-in.html">system analyst</a></td>              <td>technology</td>              <td>intern</td>              <td>jakarta</td>            </tr>          </table>        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more