Select Multiple / Open input if Others

by Krzysztof Niecikowski

HTML

<div id="other_income_selector">
        <label for="other_income">SELECT</label>
        <select 
        class="form-control other_income" name="other_income" id="other_income" multiple>
            <option value="None">None</option>
            <option value="Employment (PAYE)">Employment (PAYE)</option>
            <option value="Dividends">Dividends</option>
            <option value="Pension Income">Pension Income</option>
            <option value="Property (Rental) Income">Property (Rental) Income</option>
            <option value="Foreign Income">Foreign Income</option>
            <option value="Capital Gains">Capital Gains</option>
            <option value="Other">Other</option>
         </select>
    </div>
    
    <div id="other_income_other_input" style="display: none;">
        <label for="other_income_other">OTHER</label>
        <input type="text" 
        class="form-control other_income_other" name="other_income_other" id="other_income_other">
    </div>

CSS

select[multiple] {
  overflow-y: auto;
  height: 170px;
}

JavaScript

$("#other_income").on("change", function()
{
    if($(this).find("[value=\"Other\"]").is(":selected") == true)
    $("#other_income_other_input").show();
  else
    $("#other_income_other_input").hide();
});