oshliaer/JS.html

## bidForm.html
<!DOCTYPE html>
<html>

<head>
    <!--?!= include('CSS'); ?-->
        <?!= include('JS'); ?>
            <base target="_top">
</head>

<body>
    <div>
        <form>
            <div id="positions">
                <div id="position">
                    <label>Наименование:
                        <select id="names">
                            <option>Загрузка...</option>
                        </select>
                    </label>
                    <label>Количество:
                        <input type='number' />
                    </label>
                    <label>Единица измерения:
                        <select>
                            <option>тн.</option>
                            <option>шт.</option>
                            <option>кв.м.</option>
                            <option>пог.м.</option>
                        </select>
                    </label>
                </div>
            </div>
            <div id="addButton">Добавить позицию</div>
        </form>
    </div>
</body>

</html>

## JS.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#addButton').click(addPosition);
    });

    function addPosition() {
        var posCount = $('#positions').children().length + 1;
        $('#positions').children().last().after("<div id='position" + posCount + "'>" + $('#position').html() + "<span onclick='removPosition(event)'>[X]</span></div>");
    }

    function removPosition(event) {
        $(event.target).parent("div[id^='position']").remove();
    }

    // Код запустится, когда страница будет загружена
    $(function() {
        console.log('loading ...', $('#positions').children().length);
        google.script.run.withSuccessHandler(showNames)
            .getMetallNames();

    });

    function showNames(names) {
        var options = $('#names');
        options.empty();
        for (var i = 0; i < names.length; i++) {
            options.append('<option>' + names[i] + '</option>');
        }
        console.log('Done!');
    }
</script>

## код.gs
var configs = {
    nomTableId: '1wBvmPRSj-r8FhqQ85119FFEbO5uJQOIUWCq8-NNYSIA'
}

function doGet() {
    return HtmlService.createTemplateFromFile('bidForm')
        .evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
}

function getMetallNames() {
    // var nomenclatureTable = SpreadsheetApp.openById('1wBvmPRSj-r8FhqQ85119FFEbO5uJQOIUWCq8-NNYSIA');
    // var sortament = nomenclatureTable.getSheetByName('sortament');
    // return sortament.getSheetValues(1, 1, sortament.getLastRow(), 1);
    return [['Oh'],['Ah'],['Uh']];
}
	<!DOCTYPE html>
	<html>

	<head>
	<!--?!= include('CSS'); ?-->
	<?!= include('JS'); ?>
	<base target="_top">
	</head>

	<body>
	<div>
	<form>
	<div id="positions">
	<div id="position">
	<label>Наименование:
	<select id="names">
	<option>Загрузка...</option>
	</select>
	</label>
	<label>Количество:
	<input type='number' />
	</label>
	<label>Единица измерения:
	<select>
	<option>тн.</option>
	<option>шт.</option>
	<option>кв.м.</option>
	<option>пог.м.</option>
	</select>
	</label>
	</div>
	</div>
	<div id="addButton">Добавить позицию</div>
	</form>
	</div>
	</body>

	</html>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
	$('#addButton').click(addPosition);
	});

	function addPosition() {
	var posCount = $('#positions').children().length + 1;
	$('#positions').children().last().after("<div id='position" + posCount + "'>" + $('#position').html() + "<span onclick='removPosition(event)'>[X]</span></div>");
	}

	function removPosition(event) {
	$(event.target).parent("div[id^='position']").remove();
	}

	// Код запустится, когда страница будет загружена
	$(function() {
	console.log('loading ...', $('#positions').children().length);
	google.script.run.withSuccessHandler(showNames)
	.getMetallNames();

	});

	function showNames(names) {
	var options = $('#names');
	options.empty();
	for (var i = 0; i < names.length; i++) {
	options.append('<option>' + names[i] + '</option>');
	}
	console.log('Done!');
	}
	</script>
	var configs = {
	nomTableId: '1wBvmPRSj-r8FhqQ85119FFEbO5uJQOIUWCq8-NNYSIA'
	}

	function doGet() {
	return HtmlService.createTemplateFromFile('bidForm')
	.evaluate()
	.setSandboxMode(HtmlService.SandboxMode.IFRAME);
	}

	function include(filename) {
	return HtmlService.createHtmlOutputFromFile(filename)
	.getContent();
	}

	function getMetallNames() {
	// var nomenclatureTable = SpreadsheetApp.openById('1wBvmPRSj-r8FhqQ85119FFEbO5uJQOIUWCq8-NNYSIA');
	// var sortament = nomenclatureTable.getSheetByName('sortament');
	// return sortament.getSheetValues(1, 1, sortament.getLastRow(), 1);
	return [['Oh'],['Ah'],['Uh']];
	}